Community Forums › Forums › Archived Forums › Design Tips and Tricks › Increase Sidebar Width on eleven40 Theme
- This topic has 21 replies, 3 voices, and was last updated 11 years, 2 months ago by SoZo.
-
AuthorPosts
-
January 30, 2013 at 2:02 pm #16481EllisMember
Does anyone know where I can get exact step-by-step instructions on how to increase the sidebar width on the eleven40 theme while still keeping it responsive? I'm using content and 1 sidebar.
January 30, 2013 at 2:15 pm #16493SoZoMemberThere isn't an exact step by step guide that I have happened upon. There are several elements that you will need to edit. I recommend installing the Firebug add on for Firefox or using Chrome's Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules. Also take a look at the visual markup guide to understand the underlying structure of genesis.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 2:29 pm #16505EllisMemberI have already tried using Firebug and the visual markup guide and still can't figure it out. I guess I'm not quite where I need to be on a technical level to figure this theme out. Thanks for taking the time to reply.
January 30, 2013 at 4:03 pm #16522SoZoMemberI suppose the key is understanding that if you have two boxes both within a larger box you can't increase the size of one box without also either reducing the width of the other inner box or increasing the width of the outside box to accomodate the larger inner box. i.e. since the primary sidebar and the content div are both within the content-sidebar-wrap div you either need to decrease the width of #content according to the increase in .sidebar or increase the width of .content-sidebar-wrap. And if you increase the width of .content-sidebar-wrap then you need to increase the width of #inner and #wrap accordingly.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 5:17 pm #16560EllisMemberI've tried the corresponding addition and subtraction and it pushes my sidebar down to the bottom.
#content width: 580px; changed to 490px (subtracted 90px)
.sidebar width: 250px; changed to 340px (added 90px)
January 30, 2013 at 5:51 pm #16573SoZoMemberThere are several different places where a width is declared for #content that will override the default content rule, i.e. .content-sidebar #content
If you post a link to your site I can see what's going on
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 6:04 pm #16578January 30, 2013 at 6:14 pm #16582SoZoMemberSince you have a content-sidebar layout the width of the content div is defined in this rule on line 575
.content-sidebar #content,
.sidebar-content #content {
width: 810px;
}
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 6:19 pm #16586EllisMemberYeah, I've tried changing that too and still have the same problem - sidebar pushed to bottom.
January 30, 2013 at 6:21 pm #16588SoZoMemberMake your edits so I can see what's going on
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 6:32 pm #16591EllisMemberI did.
January 30, 2013 at 6:48 pm #16593SoZoMemberEverything looks like it should to me. Sidebar is next to the content. Perhaps you need to clear your cache.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 7:00 pm #16596EllisMemberI meant that I did leave the edits in place after the 2nd change -
.content-sidebar #content,
.sidebar-content #content {
width: 810px;
}width changed to 720px
I cleared the cache on my PC Firefox, PC Explorer, and Mac Safari browsers and the sidebar is pushed to the bottom on all of them
January 30, 2013 at 7:01 pm #16598SoZoMemberYep, content is showing as 720px and sidebar is 340px and everything is aligned properly fgor me
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 7:16 pm #16601EllisMemberThank you so much for all of your help - it's much appreciated. Unfortunately, I'm still stuck with a sidebar that is pushed to the bottom according to my 3 computers - 2 PCs and 1 MacBook even after clearing the cache on each machine.
Maybe someone else could check on their computer to see if my machines are the oddballs. The sidebar is located at the very bottom of the page just above the footer.
January 30, 2013 at 7:37 pm #16606SoZoMemberWhat is it you're seeing in the sidebar?
You have a Pages widget in footer widget 1. Is that what you're referring to? Can you post a screenshot?
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 8:03 pm #16614daniel123MemberI can confirm that your content and sidebar are properly aligned. The sidebar isn't pushed to the bottom, looks great from my iMac.
January 30, 2013 at 8:10 pm #16618EllisMemberWhen the View (zoom) in Firefox is set to normal the sidebar goes to the bottom. When the View is zoomed out 2 clicks then the right sidebar comes to the top where it should be. No matter how much I zoom out in Safari, the sidebar remains at the bottom. It must have something to do with the responsive theme?
January 30, 2013 at 9:24 pm #16666SoZoMemberNo, the responsive rules only kick in when you reduce resolution or the viewport size not when you zoom in or out.
Make sure your zoom is set to actual size.
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
January 30, 2013 at 9:32 pm #16667EllisMemberHere's a link to a screenshot of how the sidebar is forced to the bottom on my computers -
http://www.petcarejournal.com/sidebar.bmp
-
AuthorPosts
- The topic ‘Increase Sidebar Width on eleven40 Theme’ is closed to new replies.