1

I'm using the standard bootstrap 3 media queries that use max-width, but also want to include some for smaller phones and tablets, but can't figure out how to get them both to work for their respective devices.

For example I know this will handle any most phones:

@media (max-width:767px)

But if I want to have a separate queries for say, iphone 5's like this

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)

Either one or the other will work.

I've tried changing the order (as I know the later one will override the earlier one) and adding "!important" declarations, but nothing seems to work.

Int this particular instance I have series of links with a button below them and need to have the padding between them be smaller so they will all fit on a smaller screens (in this example an iPhone 5, but I'd like to have a 3rd one for iPhone 4 etc.), but not be to close together on the bigger one.

Is there an easy way to do this?

Thanks in advance for any help you can be.

Here's a rough example of what I tried for 3 different sizes.

/iPhone 4 and other small phones/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
    .topic-link h5 {
        padding-bottom:12px;
    }
}

/iPhone 5 and other medium phones/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px){
    .topic-link h5 {
        padding-bottom:18px;
    }
}

/iPhone 6 and other large phones/

@media (max-width:767px){
    .topic-link h5 {
        padding-bottom:24px;
    }
}

Here's attempt number 2:

/iPhone 4 and other small phones/

@media only screen and (min-width: 320px)and (max-width: 480px) {

/iPhone 5 and other medium phones/

@media only screen and (min-width: 320px) and (max-width: 568px) {

/iPhone 6 and other large phones/

@media only screen and (min-width: 375px) and (max-width: 667px) {

user2316544
  • 31
  • 2
  • 10
  • Please read our Help section on how to create an MCVE (http://stackoverflow.com/help/mcve) and add it to your question. You will get faster, better help from the community that way. – blurfus Aug 18 '15 at 21:06
  • I just added an example to my question. – user2316544 Aug 18 '15 at 21:25

1 Answers1

0

I would suggest either being more specific with your rules (for example your min-device-width for iPhone 5 could be larger than the previous max and so on.), or using min-width in the manner suggested by this answer. Perhaps give this a read as well in regards to using min-width vs min-device-width.

Community
  • 1
  • 1
gffbss
  • 1,621
  • 1
  • 17
  • 19
  • Thanks so much @gffbss. I think I've almost got it...:-) I understand now that I want to use a combination of min and max width vs. min-device-width and max-device-width, and that it's the combination of min and max width, in the right order, that will get this to work, but I can't seem to get both of the smaller queries to work because they both have the same min width (320px). I tried having the iphone 4 query be just max width, but that didn't work either. I've updated my original post with my 2nd attempt. – user2316544 Aug 19 '15 at 19:08