Need help with media query

HTML & CSS
1

Hi!

Here’s the site I’m working on: http://goo.gl/MCRTFG

In the middle of the home page, there are 6 featured posts - 3 in each row. When you resize the screen to a max width of 800px, I want these images to be 2 in a row. I’ve used the following CSS in the media query for max-width: 800px.

.home-middle .featured-content.featuredpage,
.home-middle .featured-content.featuredpost .entry {
width: 50%;
}

For some reason, it’s not working for me. This code is being ignored completely. I can’t see what’s causing this. Can I get a fresh pair of eyes on it? :slight_smile:

2

@media only screen and (max-width: 1023px)
.home-middle .featured-content.featuredpage, .home-middle .featured-content.featuredpost .entry {
max-width: 30%;
}

should fix your query, but try using min-width, rather than max-width for more of example of how to use media queries https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en

3

Hi Lauren,

Thank you so much for your reply! It helps to have a fresh set of eyes on this as I’ve been looking at it for days. :smile:

4

No problem :slight_smile:

5

If yu mean max on min-width media queries then it doesn’t really matter if you use min-width or max-width as the result is much the same these days except that the benefit of max-width is that you don’t exclude IE8 and under to start with.

The min-width approach is that you design for mobile first and then use min-width to target desktops and wider screens but of course then leaves out IE8 (unless you use a polyfill). These days IE8 isn’t much of a concern neither are older handhelds so a min-width approach or a max-width approach is fine.

I prefer the max-width approach when working from converting PSD to html because that is the design you are starting with but on projects that don’t start with a finished design then a min-width approach is fine.

In the end it doesn’t really matter these days as long as you are consistent and use what suits your workflow. :smile:

6

Hi Paul,

Thank you for that information.

I ended up using min-width in this section:

@media only screen and (max-width: 680px) {
.home-middle .featured-content.featuredpage,
.home-middle .featured-content.featuredpost .entry {
min-height: 380px;
min-width: 100%;
}
}

I would typically use max-width, but it wasn’t working. Can you help me understand why? And do you think it’s okay to leave it set to min-width or should I find a way to make it work with max-width?

Also, I noticed that even using min-width, the images are not centered on my Samsung Galaxy S3 phone. They appear to be aligned right instead of center.

Thank you for any insight!

7

Could you give us a test page with you seeing max-width not working? You’ve given us a link but it appears you have gone the min-width route. So a test page with the broken code would be nice. Also give us what browser you are doing it on. If you are saying it’s not working on your smartphone, please note that.

Max-width should be working and there might be something else at play.

8

I’ve just changed the CSS to max-width for that section, so you can view the results here: http://goo.gl/MCRTFG

I’ve commented the code to show you where it is (in the media queries section under the 680 width.

I’ve tested in Chrome, Firefox and IE 11 on my Windows 7 machine. I’ve also tested it on my Samsung Galaxy S3 phone.

Thanks for any insight.

9

The max-width wasn’t working because you still have a width on the element. Change the width to auto or 100% in the media query and it will work. It works with min-width because that forces width to be wider than the width you set. Max-width doesn’t force a width to be wider than the width you set.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test{
    width:200px;
    height:200px;
    background:red;
    margins10px;    
}
.test1{max-width:500px}
.test2{min-width:500px}
</style>
</head>

<body>
<div class="test test1">Test1</div>
<div class="test test2">Test2</div>
</body>
</html>
10

Hi Paul,

Thank you so much! I changed everything to max-width and it’s working beautifully now. I got all mixed up there I guess.

Thanks again!

11

Paul,thanks for help.i have also similar problem.

12

Please create your own thread with your own problem. Give a link to the website you are currently working on (and if it’s not live, please use jsfiddle and put your example on there so we can look.)

Also CLEARLY highlight what your issue is.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.