Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Paul Murphy
Paul Murphy
6,162 Points
Posted by Paul Murphy
Paul Murphy
6,162 Points

Issues with declarations being applied

Hi All,

I have 2 media queries as follows:

@media (min-width: 768px) { 
@media (min-width: 1px) and (max-width: 480px)

The 2nd is to target mobile devices. All of the sudden anything that I try to apply to the mobile viewport is either being ignored by the browser or adding the declarations to both @media queries

Any ideas? Thanks

Dean jenkins
Dean jenkins
5,230 Points

Get rid of the "(min-width: 1px) and" then it should work.

hope this helps!

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

It doesn't unfortunately...

The element I am trying to remove is a border applied to the right hand side of a column. I want it to be visible after 480px but not to be displayed for mobile devices.

So in the media query for mobile devices I used this: 

.column-1 {
      border-right: none;
}

This then for some reason takes the border out of the desktop view as well.

6 Answers

Dean jenkins
Dean jenkins
5,230 Points
Dean jenkins
Dean jenkins
5,230 Points

Get rid of the "(min-width: 1px) and" then it should work.

hope this helps!

Dean jenkins
Dean jenkins
5,230 Points
Dean jenkins
Dean jenkins
5,230 Points 
@media (min-width: 481px) { 
    .column-1 {
      border-right: 1px soild #000;
    }
}


@media (max-width: 480px) {
    .column-1 {
      border-right: none;
    }
}
Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

not worked either, the declaration in the media query for mobile devices cancels out the previous declaration

Dean jenkins
Dean jenkins
5,230 Points
Dean jenkins
Dean jenkins
5,230 Points

Change them around and see if that works

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

reverts everything back to default styling, attempting to apply mobile styles for desktop viewports :/

Dean jenkins
Dean jenkins
5,230 Points
Dean jenkins
Dean jenkins
5,230 Points

Can you upload your css for me to take a look at please

Dean jenkins
Dean jenkins
5,230 Points
Dean jenkins
Dean jenkins
5,230 Points

Hi Paul I have just checked your website out in chrome and they are being media Queries applied

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

Yes I know but some of the CSS I have added is not being applied e.g.

.column-1 { border-right: none; }

or

.column-3 { display: hidden; }