How to automatically reduce or increase content padding/margin with changing screen size?-CodePudding

So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1. What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that

CodePudding user response：

Have a look at these Docs here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Then you can use CSS like this

.my-class {
    /* Mobile - Desktop */
    padding: 10px;
 }
  
@media only screen and (min-width: 600px) {
  /* Tablet - Desktop */
  /* It will overwrite the other less specific classes padding */
  .my-class {
    padding: 30px;
  }
}

 
 <div >
    <h1>My Content</h1>
 </div>

Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.

CodePudding user response：

in css add this line it will work perfectly in any screen size

.service1{  
  width: 100%;
  height: auto;
}

CodePudding user response：

Define a @media query specifically for 'phones' like this :

@media (max-width: 640px) { /*...*/ }

You may want to remove the padding/margin for any smaller screen sizes. Try like this:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }
}

Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.