'Ways to change margin by screen size

How I can set this CSS margin:

.url {
    margin: 10px 0 0;
}

When screen is resized? From margin: 10px 0 0; to margin: 20px 0;

css


Solution 1:[1]

you have Several option:

1:Responsive Option:

media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

@media all and (max-width: 1000px) and (min-width: 700px) {
  .class {
   margin:50px;
  }
}

2:Using Percentage: you can use:

.class{
margin:40%;
}

resource:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/

Solution 2:[2]

Use media queries, for example to change the margin on screens smaller than 600px wide:

@media screen and (max-width: 600px) {
  .url {
    margin:20px 0;
  }
}

Solution 3:[3]

Try this

.url {
margin: x% 0 0;
}

**replace x with your requirement

eg:

.url {
margin: 5% 0 0;
}

hope this helps.

Solution 4:[4]

There is a simple way to deal with margins when you resize the screen.

Just define your container width and set margin to auto:

.url {
    width: 768px;
    margin: auto;
}

The container width will be fixed and it will be on the center of the screen. Therefore the margins will be automatically adjusted to fit the rest of the screen.

Solution 5:[5]

for mobile first {tablets to mobile devices with min-width 320px}, you could try fixed position for the menu bar and make the centre button relative. display: flex

@media screen and (max-width: 767px) and (min-width: 320px){
    .menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        position: fixed;
        bottom: 0;
        height: 5%;
        width: 100%;

        background-color: rgb(227, 248, 255);
        border-top: 1px solid;

        z-index: 0;
        
    }

    .btns {
        width: 2rem;
        height: 2rem;
        


        background: none;
        border: none;

        font-size: 80%;
        margin: 0 auto;

    }

    #mic {

        position: relative;
        bottom: 2em;

        background-color: rgb(227, 248, 255);

        border-radius: 50%;

        padding: 10px;

        border: 2px;

        box-shadow: 0 8px 6px .01px;

        z-index: 1;

    }
<div class="background">
        <div class="menu">
            <button type="submit" class="btns"><i class="fas fa-home"></i></button>
            <button type="submit" class="btns"><i class="fas fa-compass"></i></button>
            <button type="submit" id="mic" class="btns"><i class="fas fa-microphone"></i></button>
            
            <button type="submit" class="btns"><i class="fab fa-youtube"></i></button>
            <button type="submit" class="btns"><i class="fas fa-user-circle"></i></button>
        </div>
    </div>

Solution 6:[6]

try to use screen units vw

.url {
    margin: 4vw;  
}

Solution 7:[7]

Use !important to override the the previous margin.
Eg:

 @media screen and (max-width: 600px) {
.marginleftright { 
  margin-left: 0 !important;
  margin-right:0 !important;
}}
.marginleftright{
margin-right: 10%;margin-left: 10%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Niels Keurentjes
Solution 3 A J
Solution 4 Thomio
Solution 5 wanjd
Solution 6 Mohammed Mamoun
Solution 7 Himanshu Lahare

Related Questions