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 🙂
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!
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>
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.
