Community Forums › Forums › Archived Forums › Design Tips and Tricks › changed content/sidebar width – is this correct for mobile??
Tagged: width sidebar content
- This topic has 6 replies, 2 voices, and was last updated 8 years, 7 months ago by tussle.
-
AuthorPosts
-
August 6, 2015 at 10:58 am #161597tussleMember
Hi
I added this code to the custom css box (plugin) to change the content width and sidebar width on one specific page. I wanted to make the sidebar more narrow and the content area wider..sidebar-primary { float: right; width: 260px; } .content { float: right; width: 920px; }
I saw the max width is 1200px - so this is lower.
1. Is this the best way to do it? I have seen posts on changing functions php or using the Genesis layout Plugin (not sure that will work anyway as I am using the free child theme).
2. When I start to shrink the page the sidebox goes right underneath as soon as the window starts to become more narrow.
I tried this:@media only screen and (max-width: 1200px) { .sidebar-primary { float: right; width: 220px; } .content { float: right; width: 820px; } }
Seems wrong as I can't seem to make both the sidebar and content area shrink side by side. This is why I wonder if the css code is correct.
Thank you!
August 6, 2015 at 11:58 am #161601nutsandboltsMemberCan you post a link to your site? It's always easier to help if we can see what you see.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+August 6, 2015 at 3:36 pm #161643tussleMemberThanks. Very simply the right sidebar (containing enews extended) on a content/sidebar page scrolls under the content are and stays vertical - it doesn't switch to horizontal layout.
Is the css above correct for the non-mobile site?
August 6, 2015 at 3:38 pm #161644nutsandboltsMemberWithout being able to see the site, our ability to help you troubleshoot will be very limited, as we would need to use developer tools in the browser to see what's happening. Unfortunately it's not possible to tell what's wrong just by seeing the code.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+August 7, 2015 at 8:55 am #161698tussleMemberThanks.
I was most interested on issue 1, if the the simple code is correct. It works but curious if any changes to php should be made or register a new layout is needed - many tutorials advise on other ways so wondering if this is correct. I need it only for 1 page.August 10, 2015 at 9:57 am #161941tussleMemberAny experts for mobile code able to advise why the primary sidebar is extending underneath the content area vertically rather than horizontally when reducing screen size?
Using the Genesis Sample Theme - - it only happens when changing primary sidebar width/size., etc.
So far I tried:
@media only screen and (max-width: 800px) {.sidebar-primary,
.title-area {
width: 100%;
}
}Thanks!
August 11, 2015 at 9:17 am #162032tussleMemberHere's the solution to 1.
.content {
float: right;
width: 840px;
}.site-header .widget-area {
width: 600px;
}Thanks to Genesis coder for that one.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.