CODEWITHSUNDEEP
csswordpressfacebookpluginsresponsive
user2502658
user2502658

Reputation: 115

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.

Upvotes: 0

Views: 625

Answers (3)

dillonlara115
dillonlara115

Reputation: 26

Is this happening when you 'resize' the browser window live or when you are looking at the page at different devices?

Depending on which widget you are using, the official facebook widget I believe has a responsive setting you can select when building it. I have noticed that the widget itself is only responsive when you reload the page at a different screen size. Resizing your browser window on the fly will not affect the dimensions of the widget. It's using javascript to render the widget correctly but only on the page load.

Upvotes: 0

Dan Devine
Dan Devine

Reputation: 173

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.

Upvotes: 1

Provie9
Provie9

Reputation: 379

You have a wrong width in span around the iframe, try this:

<span style="vertical-align: bottom;width: 100%;height: 230px;">

and

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

Upvotes: 1

Related Questions