Search code examples
cssmedia-queries

(min-width:1110px) affecting whole styles


The styles are made with mobile first structure. So the main styles, made for up to 360px width devices, have no media query. The desktop styles are wrapped into a 1110px min-width media query, but they are affecting the whole page style. When I check the styles with Chrome Inspector, they don't even show the media query...

Here's the link of the file: http://www.institutopsicode.com/wp/wp-content/themes/psicode/style.css

You can see the problem at this URL: http://www.institutopsicode.com/wp/2015/08/31/tu-mente-te-miente/

The sidebar is being shown at the bottom of the mobile version, while in the main styles for 360px devices it has a display:none;

I've tried many things and orders but still doesn't make what I need it to...

Thanks for your time guys!


Solution

  • If the intention is for the #sidebar {display:block} part to be inside the media query for min-width:1110px, you have a problem.
    There is a } that ends the media query in line 1208, but the code that says #sidebar {display:block} is in line 1335, outside of any media query.

    There is also an extraneous } in line 1600, so I think you should remove the one at line 1208.