Ways to change margin by screen size - css

Question

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;

Answer 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/

Answer 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;
}
}

Answer 3

Try this
.url {
margin: x% 0 0;
}
**replace x with your requirement
eg:
.url {
margin: 5% 0 0;
}
hope this helps.

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

Answer 5

try to use screen units vw
.url {
margin: 4vw;
}

Answer 6

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>

Answer 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%;
}