Community Forums › Forums › Archived Forums › General Discussion › Sidebar drops to bottom
Tagged: Sidebar
- This topic has 4 replies, 2 voices, and was last updated 9 years, 3 months ago by
realestateradio.
-
AuthorPosts
-
September 3, 2014 at 3:40 pm #122666
realestateradio
Memberwhen viewing my site on a Windows Tablet at 1920x1080 the sidebar is dropping to the bottom.
If I want to change either the content body width or sidebar width for correct viewing on a tablet.so my question is what what do I change and in what section in css is for the tablet view? to look correct
I looks great on my Lenovo yoga @ laptop, 1920x1080 and higher
see http://realestateradioshow.com on a tablet 🙂
Thanks for any help you guys and guys can offer 🙂
http://realestateradioshow.comSeptember 4, 2014 at 9:39 am #122771jbergen
MemberHi,
One way to fix this is to change the widths of the content and sidebar to percentages rather than px widths.
I changed the content to
width: 68.2778%;
and sidebar towidth: 27.0833%;
and the sidebar stopped dropping to the bottom at 1200px wide.style.css, line 1612:
.sidebar-primary { width: 27.0833%; }
style.css, line 1607:
.content { width: 68.2778%; }
Now the columns will shrink slightly as the browser gets narrower, and the sidebar will go below the content at screen widths <= 960px.
I hope that helps!
Jamie
Jamie @ Ladebug Studios
September 4, 2014 at 9:08 pm #122855realestateradio
MemberThat worked great, ran into a little problem, well 2
1)the content text is right up against the edge of screen when I shrink browser window. can I force it to stay away from left side say 50px ?
2)second is how hard is it to tell the sidebar to disappear when menu becomes hamburger
September 4, 2014 at 9:28 pm #122858jbergen
Member1) To move the content text away from the left edge, you can change padding-left to 40px. I chose 40px because that's the amount of padding on the right side of the content block.
style.css, line 474 (change last line):
.content-sidebar .content { border-left: medium none; float: left; padding-left: 40px; }
If you only want this to happen in smaller browsers, you can instead add this rule to the appropriate media query.
2) It looks like your menu goes to hamburger at a browser width of 1200 px wide. If you really want your sidebar to disappear, you can add
display: none;
to that media query. You'll also want to tell the content area to be 100% to fill the width of the screen:style.css, line 1630 (add the last two rules):
@media only screen and (max-width: 1200px) { #responsive-menu-icon { margin-top: 20px; } #menu-main-nav { margin-bottom: 20px; } .sidebar-primary { display: none; } .content { width: 100%; } }
If you simply want your sidebar to display below the content (and not disappear), you can change it to
width: 100%;
in the media query for 1200px:Jamie
Jamie @ Ladebug Studios
September 4, 2014 at 10:30 pm #122868realestateradio
MemberFantastic, your on my birthday list 🙂
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.