Good practice to write CSS Media Queries

Question

I am fairly new to CSS Media queries. I am actually trying to adjust left margin for a button ('Add+' button as shown in the attached image) for different screen widths. I am trying to do this:

 @media only screen  and (min-width: 200px) and (max-width: 350px)
    {
        .button_orange_extended
        {
            margin-left:0px;
        }
    }   /*Media query for one specific screen width*/



  @media only screen  and (min-width: 360px) and (max-width: 400px)
    {
        .button_orange_extended
        {

            margin-left:30px;
        }
    } /*Another Media query for  specific screen width*/



  @media only screen  and (min-width: 400px) and (max-width: 450px)
    {
        .button_orange_extended
        {

            margin-left:80px;
        }
    }

By this means, i got to write this code around 10-12 times and adjust margin accordingly. Considering that i need to adjust margins not only for mobiles but for other devices like tablets. So, is there an short alternative approach? (Below is the image).

You're missing 10px between first and second queries... once you have one min width the rest only need `max-width` because by default, the `min-width` is covered by the previous `max-width` - also, if you have lots of these, maybe look at using % for `margin-left` that will cover a lot of devices — StudioTime, Sep 02 '16 at 06:58
@DarrenSweeney But still for every specific screen width, i got to write a seperate media query. In this way, i will write around 12-15 media queries which is not a good practice i think. — Bolshoi Booze, Sep 02 '16 at 07:00
Without seeing your design it's hard to answer and suggest a better way unfortunately — StudioTime, Sep 02 '16 at 07:01
Why don't you float the button right then use `right-margin` then it's the same on every device - using `margin-left` as you are is dangerous and not really maintainable — StudioTime, Sep 02 '16 at 07:19

score 1 · Answer 1 · answered Sep 02 '16 at 07:01

1

Instead of using px, you can use em. ems are relative to the current font size, whereas px is an absolute unit of measurement. So if you used em on all your elements, you could just change the body's font-size. This way, you won't have to set the size of every element per every different screen width, you'll only have to change the font size. I've used http://pxtoem.com/ for converting from px to em, I'd recommend it for beginners. Also, a very good post describing why you should use em instead of px: Why em instead of px?

answered Sep 02 '16 at 07:01

ifvictr

141
2
3
13

Thankyou! But I'm not concerned with font size. I need to adjust margin for the button. It has nothing to do with 'em' – Bolshoi Booze Sep 02 '16 at 07:14
Oh, okay. But `em` is very useful in responsive design (just a tip!) So the answer is no, there is no shorter way to do it. But I did notice you used `0px` for the first media query. It can be shortened down to just `0`. That's the most it can be shortened (as far as I know). – ifvictr Sep 02 '16 at 07:18

visua · Answer 2 · 2016-09-02T13:03:57.910

In my opinion, this is the opposite of a responsive approach in the sense that you seem to target specific device screen sizes and, as you say, you will have to write the same media query 10-12 times for a single class doing so. Also, you seem to try and position your element in a certain way by pushing it a number of pixels further to the right as you scale up. That wont work. The best approach is to use a framework of your own design or bootstrap to create a grid where it is easier to manage positioning elements. I never have to use more than four media query rules, and then put all the needed exceptions for classes, id;s etc inside them. Set a default value for your classes, starting with mobile. That way, you need no media query rule for the smallest screen sizes ( and very few rules in total );

.button_orange_extended {
// other additional rules if any
// you need no margin rule for left-margin here since it is set to 0 anyway
}
// Then you can set you media query exceptions to anything, example;
@media screen and (min-width: 300px) {
        .button_orange_extended {

        }
    }
@media screen and (min-width: 600px) {
        .button_orange_extended {

        }
    }
@media screen and (min-width: 1200px) {
        .button_orange_extended {

        }
    }

score 0 · Answer 3 · answered Sep 02 '16 at 07:21

0

I think you don't need media queries for this. You can use percent on margin-left. For example

margin-left: 80%

https://jsfiddle.net/Ld6025vf/

answered Sep 02 '16 at 07:21

Farid Imranov

2,017
1
19
31

Good practice to write CSS Media Queries

3 Answers3