Community Forums › Forums › Archived Forums › Design Tips and Tricks › Unexplained Behaviour by my CSS
- This topic has 3 replies, 2 voices, and was last updated 8 years, 9 months ago by jvinegar.
-
AuthorPosts
-
July 17, 2015 at 2:02 pm #159676jvinegarMember
Hi,
The situation: I want my website to have a traditional Content-Sidebar look, however the default css content width was too wide.
The action taken: I went into the css file and adjusted the main width from 1140 to 950.
From:
.wrap { margin: 0 auto; max-width: 1140px; }
To this:
.wrap { margin: 0 auto; max-width: 950px; }
However this just squishes my default main content which is 850, and sidebar with is 250 into the space of 950... and the result is the sidebar getting pushed down below the main content due to no room.
I figured my next step was to now reduce the .Content-Sidebar content to the appropriate size... default code looks like this:
.content-sidebar .content { border-left: none; float: left; padding-left: 0; }
and changed it to this:
.content-sidebar .content { border-left: none; float: left; padding-left: 0; width: 660px; }
Then I noticed that the padding on the left was at 0, so I figured I should even it out... to figure out what the padding size was I looked at the default ".content", the code looks like this:
.content { border-left: 1px solid #ddd; border-right: 1px solid #ddd; float: right; padding: 32px 40px 24px; width: 850px; }
Seems to be 40px... ok great, I change my code to this:
.content-sidebar .content { border-left: none; float: left; padding-left: 40; width: 660px; }
I was about to congratulate myself on a job well done... but I had this feeling that I should play with the left padding to see what it looks like if I adjust the sizes... and this is where the unusual behavior begins...
If I adjust the padding to any number... be it lower or higher... the padding auto adjusts to 40 when I view the website... this tells me there's something wrong with the coding or that I missed something.
Does anyone know what is going on, should I be concerned?
http://joshvinegar.com/July 17, 2015 at 2:07 pm #159677jvinegarMemberI've left the left padding at 0 for now while you guys look at it.
July 17, 2015 at 4:20 pm #159683styzerParticipantHi Josh,
Looking at your site right now, I see content-sidebar working (Chrome browser), at width 950px. No padding for the wrap, only margins. The margin will push your wrap away from its parent (or centre it as in your code), while the padding will push your content away from the wrap's borders.
/* Line 465 */ .wrap { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; max-width: 950px; }
If you want the wrap to be 950px, and have a balanced content-sidebar ratio, I would suggest playing with % and not pixels. And if you reduce the width of your wrap, I would also suggest you also cut the margins and paddings values.
One other thing, you may want to work on the responsiveness? I looked at it using Chrome's device viewer, and all we see is a blue top menu bar, and no article. You should have your blog content at least show up .
Hope this helps a bit...
Regards,
Andre
July 19, 2015 at 8:04 am #159805jvinegarMemberI figured out the responsiveness issue. It was Jetpack and it's "Mobile Theme" option, it was turned on. It must have conflicted with Genesis or my child theme. I've deactivated it now.
As for my initial problem of setting the maximum width, I'm still clueless as to how to do it right.
Do I set the
.wrap
to 950px as a first step, and then the.content-sidebar .content {
and.sidebar-primary {
, should be %'s?I still have the unexplained behavior issue with
.content-sidebar .content { border-left: none; float: left; padding-left: 0;
As soon as you adjust the
padding-left: 0;
by any number it seems to automatically adjust to 40px.I've reverted the child theme back to default without any edits. I'm just confused on how to properly edit the content and sidebar so that it has a maximum total width of 950px.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.