Hi. I embedded an infographic on one of the pages of my website and when viewed on mobile devices like an iPhone or tablet, it ends up going over into the sidebar (on tablet) or only half of it shows up (on iPhone). Here’s a link to the page: https://civiliansgi.com/index.php/2017/03/24/work-opportunities/ I’d like to keep it as an embedded code because it has links that are essential for viewers to click. Is there a way you could help me get it so it’s formatted right? Thank you.
Hi,
It seems the iframe that it is using has a fixed with, and it will display like this at all times. You could try to modify the code to something like this – https://www.screencast.com/t/dtA0JZNC so it will be contained in the post content. But unfortunately I can not modify the image size inside the iframe with custom code, it seems it has the same fixed width – https://www.screencast.com/t/Vb9lCKzN5nV
If it were to have a width like this – https://www.screencast.com/t/NJYOQKrtXO instead of the fixed width, it would display properly.
Thanks
Thank you Simion. Where do I go to make those changes?
Hi,
You should try to make the width modification in the iframe code that you are using for the embedding
– https://www.screencast.com/t/BLtB65cTb8A
This will make the sidebar not overlap the image, but for the said image I can not think of a way to modify it with custom code.
Another method you could try in this situation would be to make the sidebar drop below the content as it would on smaller devices only earlier, between the resolutions in which this occurs
Without the code – https://www.screencast.com/t/PuMD4lSaW
With the code applied
– https://www.screencast.com/t/a1SdIogp7
– https://www.screencast.com/t/zu9cAl6lz
This is the code used if you should decide to try it, you must enter it in Theme panel->Custom Css
@media (max-width: 1018px) and (min-width: 768px) {
.td-main-sidebar {
clear:both;
width: 100%;
}
.td-main-content, iframe {
float: none!important;
width: 100%;
}}
Thanks
