Solved

CSS problem at small widths

Posted on 2015-02-03
3
105 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

738 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