Media Screen Not Working. - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

August 2, 2013 at 8:56 pm #145543

Participant

I have tried many things can’t not think of any thing else but for some reason when i display column-left as none; will not force the featured products area in container always out side when I use media screen?

http://codepen.io/mwbcomputers/pen/xtHDj

August 2, 2013 at 9:02 pm #145544

CarraraWebsiteSolutions

Participant

Just had another crack at it here is were I think went wrong need to removed coulmn-left +content margin

    @media only screen and (max-width:768px) {
        #column-left { 
        display: none;
      }
    }

    @media only screen and (max-width:480px) {
        #column-left { 
        display: none;
      }
    }

    @media screen  and (max-width: 360px) {
      #column-left { 
        display: none;
      }
    }
    @media screen and (max-width: 320px) {
      #column-left { 
        display: none;
      }
     ` #column-left + #content {
        margin-left: 0px;
      }`
}

August 2, 2013 at 9:34 pm #145548

Martin Duran

Participant

Hi,

If I’m correct, you are trying to float #content left and make it take 100% of the div at the first breakpoint?

If so, you only need one media query. Currently, you are using several. Here is what you’ll need:

@media (max-width:768px) {
    #column-left { 
    display: none;
  }
  #column-left + #content {
    width: 100%;
    margin: 0;
  }
}

Here is a link to what I believe is the solution to your problem:

http://codepen.io/Martin-Duran/pen/pGkro

August 2, 2013 at 11:05 pm #145556

CarraraWebsiteSolutions

Participant

Thank You that is much better now but have to style each screen size so done this each size is going to have different changes

@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 959px) {
    /* styles for narrower desktop browsers and iPad portrait */
    #column-left { 
        display: none;
    }
    #column-right { 
        display: none;
    }
    #column-left + #content {
        width: 100%;
        margin: 0;
    }
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
    #column-left { 
        display: none;
    }
    #column-right { 
        display: none;
    }
    #column-left + #content {
        width: 100%;
        margin: 0;
    }
}

@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
    #column-left { 
        display: none;
    }
    #column-right { 
        display: none;
    }
    #column-left + #content {
        width: 100%;
        margin: 0;
    }
}

@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
    #column-left { 
        display: none;
    }
    #column-right { 
        display: none;
    }
    #column-left + #content {
        width: 100%;
        margin: 0;
    }
}

@media all and (max-width: 240px) {
    /* styles for smaller devices */
    #column-left { 
        display: none;
    }
    #column-right { 
        display: none;
    }
    #column-left + #content {
        width: 100%;
        margin: 0;
    }
}

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.