iframe - set different width to content?

  • 1
  • Question
  • Updated 6 years ago
  • Answered
On this page

www.belfastmh.co.uk/cat-lift-trucks

I have the Cat website embedded in (with permission) to allow user sot browse it directly without leaving my site.

As you can see, the width of the Cat website does not fit in to the width of my content (which I want to keep the same) unless I set its width to 110%.

Is it possible to change the content width on that one page to allow me to centre the Cat website and still show all of it?
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello graham

From a design point of view I wouldn't recommend to change the width for one page, but rather accept the need to scroll for the iframe.

If you'd still like to do that, you will need to make quite a couple of amendments to all affected elements of your page, i.e. the main navigation, your banner image, the secondary navigation, and your content area:
  1. First you must set the width to 100% in the HTML Widget with the iframe code.

  2. Then you will need to adjust all other page elements to the extended width. This will include creating a wider version of your banner image. Once done, you can change the CSS just for that one page by going on as follows:

  3. Drag and drop an HTML Widget to the very top of your page with the iframe.

  4. Add this code to the HTML Editor:
    <style type="text/css">
    
    /* changes width of your content area */
    div#content {
    width: 1000px;
    }

    /* changes width of your main navigation */
    div.ys_nav {
    width:980px;
    }

    /* changes width of your secondary navigation */
    div.ys_nav2 {
    width: 1000px;
    }
    </style>

  5. Click on "Save".

You may need to extend the space of your banner area at "div#sys_banner" as well.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Hi Stefan

Thanks for the reply.

I agree, it doesn't look right. Ideally I would like to keep the page exactly the same but just allow the iframe to be wider and still take up a central position. If this isn't possible then I will just leave as it is.

Thanks for your help!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Graham

Yes, you could do that. Here is what you'll need to do:
  1. Click on "Edit" on the HTML Widget with which you added your iframe.

  2. Change the width to 111%, and add this attribute before the src attribute:
    style="margin-left: -50px"

Let me know how that goes.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Beautiful :)