Sidebar width issue with Twitter Widget

elliotstoner · Member · Feb 20, 2014 at 5:17 am
Copy link

Add topic to favorites
Hey all! This is the first time I’m doing this, so please bear with me as I figure out what information y’all need.

I have my website (honorscreatives.wordpress.com) that I am trying to customize. My first issue was to increase the page width, and I successfully accomplished that. My new issue is that if my browser window is too small, the twitter widget jumps out of the sidebar. I have tried everything that I know how to do with CSS (which is very limited), and still have not found a solution.

Also, it seems that there is an extremely low tolerance for when it switches to the different view that resembles the mobile theme when I decrease the width of my browser window. Is there a way to set the width for the main content area so that it will decrease in width instead of staying a single static width (as the browser width decreases, so does the content area width)? Please help!

Here is my current CSS code:
```
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 600px;
}
.content-area,
.content-sidebar {
	padding-top: 40px;
}
```
I’m using the TwentyFourteen theme, and I have the Custom CSS Upgrade.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 20, 2014 at 5:27 am
Copy link
Hi there, I’m going to get with our developers on Thursday about this as I think it is a bug, but in the meantime, add the following CSS which will keep it from jumping out of the left sidebar on you. Nothing you have done in your CSS is causing it. I can disable everything you have and it still happens.
```
#twitter_timeline-2 iframe {
    min-width: 145px !important;
}
```
elliotstoner · Member · Feb 20, 2014 at 5:30 am
Copy link
That seems to fix the jumping out problem, but it then causes the text within the widget itself to overlap.
thesacredpath · Member · Feb 20, 2014 at 5:31 am
Copy link
On the second part (content width as browser window is narrowed), let me work on that for you.
michiecat · Staff · Mar 7, 2014 at 10:48 pm
Copy link
Hi there, were you able to work out the issues with the Twitter widget? It looks like it’s resizing properly now.
elliotstoner · Member · Mar 11, 2014 at 12:47 pm
Copy link
Yes, I believe that the twitter widget problem has been resolved, but I have not been able to resolve the issue with the page width. Perhaps it is something that cannot be fixed and I just need to live with.
designsimply · Member · Mar 12, 2014 at 11:09 pm
Copy link
Is there a way to set the width for the main content area so that it will decrease in width instead of staying a single static width (as the browser width decreases, so does the content area width)?

To make the main content area a flexible width, you could set it to a percentage instead of a fixed pixel width. For example, try changing 600px to 60% in the example you posted earlier.

No items found.