Can not get this iFrame to appear full-width

  • Hello my dear developer friends,

    Thank you in advance for taking the time to give me any advice or pointers you have about this. I can not get the iFrame of the OpenTable reservations to appear full-width (even though it should). For some reason something is restricting it but I can not find where, causing the red ‘reserve’ button to go onto the 2nd line and have a less good appearance. They receive lots of traffic so I would very much like to get this issue figured out.

    Thank you very much for your time if anyone who knows more than me is able to look at it and help me out.

    Kind regards and I really appreiate it!! Peace.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Add this to the Additional CSS section of the customizer or style book:

    .ot-dtp-picker.wide {
    width: 100%;
    max-width: 1164px;
}

    FWIW the open table widget is not a literal “iframe”. It appears to be plain old HTML, possibly inserted via script. Doesn’t matter much what it’s called as long as we get what you’re talking about ??

    Thread Starter cuberuler

    (@cuberuler)

    Hi, thank you so much for your response. I did add the code that you mentioned to the ‘additional CSS’ page for the main body of the website. This is what it looks like:

    .ot-dtp-picker.wide {
    width: 100%;
    max-width: 1164px;
    }

    @media screen and (min-width: 782px) {
    #wpzf-7143 {
    margin-top: 10px;
    }
    }
    margin-bottom: 50px;
    border-bottom: none;

    ### Of course, the bottom part is from some other edits I made.
    I wonder why the code is not being effective? It’s rather funny, I have done everything I can do to make it wide.

    Thank you so much and if it’s not resolvable, it’s not, but it sure would look better if it wasn’t always doubled over on itself even on large screens.

    Thank you again, y’all are heroes!

    Thread Starter cuberuler

    (@cuberuler)

    This is very strange. Even though I added the CSS as he instructed, it still does not want to go to full width. How strange. I wonder what is restricting it… Everything is on full-width, etc.

    This is what the code says: 

    <center><script type='text/javascript' src='//www.opentable.com.mx/widget/reservation/loader?rid=1175293&type=standard&theme=wide&color=1&dark=false&iframe=false&domain=commx&lang=en-US&newtab=true&ot_source=Restaurant%20website'></script></center>
    Moderator bcworkz

    (@bcworkz)

    It think it’s because the HTML is added via script. When the browser parses the CSS code, the HTML does not yet exist, so there’s nothing to assign the style to. When the script inserts the HTML, the browser is unaware of this so fails to apply the CSS we want.

    Instead of Additional CSS, try placing the suggested style rules in their own <style> block within the page’s footer. By having it at the end of the page, hopefully the HTML already exists once the CSS is parsed. If directly altering footer HTML is infeasible for some reason, you could output the CSS from the “wp_footer” action hook.

    If that doesn’t work, you’ll probably have to assign the styles via JS that runs after the HTML has been inserted.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can not get this iFrame to appear full-width’ is closed to new replies.