Solved

CSS problem at small widths

Posted on 2015-02-03
3
100 Views
Last Modified: 2015-02-03
When viewing http://dev4.wpmate.net/ when the browser width is 600px or less, the columns (sidebars and content) are stacking correctly, but the content section is still showing too far right. It should be the whole way to the left the same as the sidebars.

I added this to the media section of the stylesheet for 600px:
      .page-template-three-column-php #content, .page-template-three-column-php .left-sidebar, .page-template-three-column-php .right-sidebar {
      width: auto;
      float: none;
      clear: both;
      }      

Can anyone see what's still making the content area push to the right?
0
Comment
Question by:Dzynit
3 Comments
 
LVL 7

Accepted Solution

by:
rgranlund earned 500 total points
ID: 40586978
.page-template-three-column-php #primary
line 1777 I think.  You have wrong CSS .  no floats are noted and a big margin to the left.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40586995
It looks like the problem is that the page is structurally unstable because of the duplicate id at lines 56 and 109.  Ids must be unique otherwise the CSS parser does not know what you are referencing (even if you use a class).  The HTML parser will generate code to prevent the browser from throwing an uncaught exception, but it does not attempt to decide which node to attach to the styles.

Cd&
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40587015
That was it. Thanks much! A fresh pair of eyes always finds it :)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn how to dynamically set the form action using jQuery.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now