user2502658 user2502658 - 3 months ago 12
CSS Question

Wordpress Sidebar Responsive Width

I have created a Wordpress theme with "responsive" sidebar's. I have set them to 20% width - which works great. However, I have a Facebook Widget inside my left sidebar which is not "resizing" according to screen width / size.

I have tried the below in my css, with no avail:

.fb_iframe_widget iframe {
position: relative;
max-width: 100%;
min-width: 100%;
}


The facebook widget is still "overlapping" on smaller / narrower screen sizes.

Answer

To stop the iframe from overflowing into the middle body content, you could apply an overflow: hidden to the parent div

.art-blockcontent {
    overflow: hidden;
    padding: 7px;
    margin: 0 auto;
    color: #000000;
    font-size: 12px;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

The iframe isn't going to magically squash itself to fit the tiny space on offer ( like the stretched image in the right column) and is probably at minimum viable height / width to actually serve any purpose.

I note that your nav menu is also broken at smaller screen sizes, maybe you would be better off to change the overall breakpoint and have your site go to a one column layout sooner.

Comments