How can I center an iframe on my webpage?

Store Design
1

Hello,

I am having an issue centring an ”

I am not 100% sure on HTML and CSS so I am sorry if this seems simple to you this goes outside my knowledge :slightly_smiling_face:

2

Hi @TheToolboxshop , please share store password so I can take a look. Your store is password protected.

  1. From your Shopify admin, go to Online Store > Preferences.

  2. Scroll to the Password protection area

1 Like
3

@TheToolboxshop Please provide the URL of your store and if it is password protected please share the password too. Thanks

1 Like
4

@TheToolboxshop ,

Share the password

1 Like
5

https://the-toolbox-shop-e9a8.myshopify.com/

Password “bread”

6

@TheToolboxshop Use this code instead of the code you are using.

<iframe height="1000" width="100%" src="https://www.vigor-equipment.com/konfigurator/index.php" frameborder="0" seamless="seamless"></iframe>
7

Screenshot_3.png
Screenshot_3.png1902×965 75.2 KB

If I use 100% I get this as it’s from a German website I have translated it and it’s down to the resolution / dimensions on the Iframe it won’t display in anything less than 1000x665

8

@NerdCurator ,

Use this code,

9

See my reply to @NerdCurator

10

@TheToolboxshop ,

.page-width--narrow {
    max-width: 100%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

11

@TheToolboxshop I have checked the issue and found the solution for it. It will require some custom coding. We need to create a page template to adjust the width of the page which then we can modify the iframe code as per our need. You can message me here directly too as I will need collaborator access to fix the issue. Thanks

12

Massive thank you to @NerdCurator for sorting this out for me!

1 Like