Move Sidebar Closer to Center
-
Helping a friend with his site: http://ellersjonathan.com which uses the Flounder theme.
I would like to reduce the amount of space between the sidebar (div=”secondary”) and the main content area, “entry-area”.I’ve tried shrinking the wrapper, “page”. I don’t find a right margin in the content block or a left margin in the sidebar. Sidebar is float right.
Any insights as to how to achieve this are greatly appreciated!
-
First off, you are using a responsive width theme, and with the CSS you have currently, it is breaking that and it is unreadable on smaller screens (small tablets and smartphones).
My suggestion is to work first with only the width of #page and get the overall width set. The right sidebar has a left margin of -100% so it show flow over as you narrow #page.
-
I redefined width and yes, it does narrow the space between the sidebar and the content. Thank you sacredpath.
A followup question: As I narrow the browser page to about 1300px, it moves the sidebar down and to the left. How can I delay the flowing of the sidebar until, about 1100px?
Do I need to override the widths of the class definitions of body? Would the syntax be .home.page.page-id-1.page-template-default…. { width: 1100px}
Thanks for your help.
-
I’m still seeing some issues with your site when I narrow my browser window and your content is getting cut off on the right side so that visitors cannot read it unless they scroll to the right.
I would suggest let’s start from scratch on all the width stuff so that we can preserve the responsive nature of your site for visitors on tablets and phones. To start, let’s save all of the existing CSS to a plain text file and then delete it from the CSS edit window.
Next, let me know what the owner of the site is wanting to do and we can work from there and get it looking like they want it.
-
Thanks sacredpath I’ve removed the custom css and actually it looks much better to me. Only thing I would put back is the opacity setting that made his photo clear instead of translucent.
Is there a way to remove the gray rectangles to the right and top right of the main content? I believe these are the classes “entry-meta” and “sidebar-bg”. And would that in itself reduce the width of the page? – which would be a good thing – without disturbing the other elements e.g. the widget sidebar?
-
This will get rid of the grey to the right of the content.
.hentry.type-page .entry-meta, .hentry.error404 .entry-meta, .hentry.no-results .entry-meta { background: none; }This will get rid of the grey behind the post/page titles. I’ve included a text color declaration since the existing title text is nearly white. You can of course edit the red code I used for demonstration purposes.
.hentry.type-page .entry-header, .hentry.error404 .entry-header, .hentry.no-results .entry-header { background: none; color: #CC0000; } -
You know actually, for the block at the right, you might want to do this instead. It hides that block entirely and then widens the content to recover that space.
.hentry.type-page .entry-meta, .hentry.error404 .entry-meta, .hentry.no-results .entry-meta { display: none; } .entry-header, .entry-content, .entry-summary, .comment-links, .comments-area { margin-right: 0; } .type-page .entry-header { padding-right: 0; } -
I tried your CSS suggestions and the gray rectangles do disappear. What I didn’t say is that the page, defined at 1300px in Flounder, moves the right sidebar down to the left, if you’re viewing it in on a smaller screen, such as a laptop.
I realize that’s responsive behavior – which is a good thing, but how can I narrow the width at which it “responds”.? How would I narrow the page to, say 1100px, so that the sidebar stays as on the right and the menu and content stay put also?
Sacredpath, thank you and I hope I haven’t confused you too much!
-
Give the following a try. I’ve changed the min-width trigger on the @media rule to 1100px which will override the 1300px rule in the original CSS.
@media screen and (min-width: 1100px) { #page { max-width: 1240px; } .content-area { float: left; width: 100%; margin: 0; } .site-content { margin: 30px 22.58065% 0; } .site-header { float: left; margin-right: -100%; width: 17.74194%; } .side-widget-area { clear: none; float: right; margin: 30px 0 0 -100%; overflow: hidden; width: 17.74194%; } } -
Works beautifully on Macs. The only thing I noticed was on my ancient PC (IE 8 /Win XP), the sidebar is still defaults to the bottom left. Haven’t yet checked recent versions of IE on Win7/8. I know that IE often requires some “special” handling.
I’m unfamiliar with some of the css such as ‘@ media screen’ which looks like it contains all the other divs and classes. Also new to me are margins of -100% and width percentages to five places of precision. Wow!
If you have happen to know a good site to learn about these, that would be good to know.Thank so much for your help sacredpath!
-
There are some tricks being used, such as a -100% margin and 5 or so places after a decimal on % widths that are being used that older versions of IE probably aren’t able to handle and that is, I think, especially true for IE7 and 8, which support very little CSS3 or HTML5. The web is simply passing them by.
If you take a look at this chart by w3cschools (World Wide Web Consortium), you will find very little supported on IE8 and older.
If you search on the web for “learn about @media queries” (without the quote marks) you will find a good number of resources on @media queries.
-
Thanks for this information sacredpath – and your help! Now I just need to devote some time to learn about it.
-
- The topic ‘Move Sidebar Closer to Center’ is closed to new replies.
WordPress.com Forums 