CODEWITHSUNDEEP
cssmedia-queries
Bolshoi Booze
Bolshoi Booze

Reputation: 514

Good practice to write CSS Media Queries

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).

enter image description here

Upvotes: 0

Views: 1833

Answers (3)

visua
visua

Reputation: 11

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 {

        }
    }

Upvotes: 1

Farid Imranov
Farid Imranov

Reputation: 2075

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/

Upvotes: 0

ifvictr
ifvictr

Reputation: 143

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?

Upvotes: 1

Related Questions