Responsive padding

1

hi, sorry for my English…

I to want to have responsive padding for mine link on nav.

have a CSS file, how to show it, the link on nav

.dropdown { 
   position: relative; /* brauche um die neue link in Nav zubauen */
}

.dropbtn {
    padding: 15px;
    padding-top: 9px;
    padding-bottom: 10px;
}



li a:hover, .dropdown:hover .dropbtn {
     background-color: #f1ebeb;
   
     
}

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 13px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 10px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

}

.dropdown-content {
   
    color: black;
   
    text-decoration: none;       /* Bekomme die Liks keine Unten Stricht ....*/
}

.dropdown-content a {
    color: black;
    padding: 12px 21px 15px 8px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    font-size: 13px;
    text-align: left;
    font-weight: bold;
    
} 


.dropdown-content a:hover {
background-color: #9f9e9e;

}

how to show it,

padding
padding922×732 176 KB

My question, it is possible on this class,

.dropdown-content a {
    color: black;
    padding: 12px 21px 15px 8px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    font-size: 13px;
    text-align: left;
    font-weight: bold;
    
}

the padding properties to have, that later muss not to change it, in every media Query as breakpoints?

I will that every device doing “automatic” this padding fron this CSS file, without write on every Media Query the top-right-bottom-left for every device…

I asked it because I have My media Query Responsive…

Can please anyone help me, Thanks !

2

Do you mean you want to set padding? it’s got nothing to do with responsiveness.

I think this relates to the fact that you’re writing everything inside media queries. If you want it to not change, don’t put it inside a media query, it’s as simple as that.

Have you written specific CSS for every single element in every single one of those massively overspecific media queries you’ve written?

3

i have a CSS file, and have another file with Responsive Media Query, it is Responsive i have not as before… here you can see it (only this, because today end it, tomorrow i will in all website write it…). My idea is, have this class

.dropdown-content a {
    color: black;
    padding: 12px 21px 15px 8px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    font-size: 13px;
    text-align: left;
    font-weight: bold;
    
}

as global, only will font-size: ; in every Media Query write, how the image to show, in desktop and smaller device, it to show different Big… therefore i to search a “global” to build…

4

Do you mean just change the font size using media queries and keep everything else the same, or vice versa?

Edit: what the heck are you building on top of here?

5

How my first file to see, it is the CSS , here i have the Elements and Tags for presentation the website. Then have another file, here have my Grid-Layout, here build rows and columns also the Responsive Media Query…, then both files add to my Pages…

6

I’m not really sure I understand your question, but I’ll try to answer it anyway.
You’ve used px for your padding. And that is a fixed size. If you want the padding (or the margin, or the font itself) to change relative to the font-size of the whole webpage you should use rem or em in stead of px.

Then you are able to just change that one font-size of the html on smaller screens. All paddings and margins will change with it in proportion to that smaller or larger font.

You can check the different css units on the w3schools site and try it. Just put a padding in the example and see how it works out with px, rem or em.
https://www.w3schools.com/cssref/css_units.asp

Hope this helps.

7

Thanks! , i will used it…

Then you are able to just change that one font-size of the html on smaller screens. All paddings and margins will change with it in proportion to that smaller or larger font.

when write one time on the file CSS file, but not on the Responsive Media Query file, will it change in proportion to that smaller , or should also write on the Responsive Media Query file ?

You can check the different css units on the w3schools site and try it. Just put a padding in the example and see how it works out with px, rem or em.

I used emf for mine Media Query and some time for Elements… here a example how have my Media Query file, now…

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops

 @media (min-width: 80.0625em)

*/

@media (min-width: 80.0625em) {
  
   body {
       display: grid;
       display: -ms-grid; 
       background-color: #eaf6e5;
       grid-row-gap: 5px;
       grid-template:
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 5em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;
    }
    
    
    
    
    
   
  
    nav a {
      color: black;
      text-decoration: none;
	  display: inline-block;
	  padding: 10px 8px 10px;
	  font-size: 20px;
	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
    }
    
    .dropdown-content a {
       font-size: 15px;
       
       
    }
    
    .dropdown:hover .dropdown-content {top: 41px; }
    .new-link:hover .new-content { top: 41px}
    .languag:hover .languages {top: 41px;}
    
    
    
    .new-content a { padding: 12px 50px; }
    .languages a { padding: 12px 34px; } 
    
    
    .dropdown-content a { -webkit-padding-start: 22px; } 
    .new-content a { -webkit-padding-start:  48px;}
    .languages a {-webkit-padding-start:  39px;}
   
     
             
    article {margin-left: 4px;}     
   
    
    body > main {
       grid-area: main;    
        box-sizing: border-box;    /* margin wo der test anfang    */  
        padding: 7px;             /* margin wo der test anfang , padding für den margin    */ 
        height: 100%;
    }
    body > aside  {
        
       grid-area: info;
        display: block;
        display: -ms-grid;
        -ms-grid-column: 3;
        -ms-grid-row: 3;
        margin: 1px;
        background-color: #d2f3c6;
        margin-top: 60px;
        margin-left: 150px;
    }
    
          
          
          /* contac big  */
    
    .mellat {padding-bottom: 120px;}   
    
    
    
    
          
    .seste {display:  none;}
    .siebte{display: none; }
    .erste-unten {display: none; }
    .ipad-lange {display: none; }
    
}
  

header {
    
    grid-area: header;
    background-image: url('Photo/view.webp');  
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 140px;
 
    -ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;   
    
}


nav {
	grid-area: nav;
	-ms-grid-column: 1/3;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;

   background-color: #d2f5c4;
   margin: 1px;

}



main {
    
  grid-area: main;
    display: block; 
    -ms-grid-column: 1/2;
    -ms-grid-column-span: 2; 
    -ms-grid-row: 3;
   
    background-color: #e1f2d9;
    margin: 2px;
    margin-left: 19px;
    
    
   
    
}  


/*  Werbung Recht   */

.drei {
    
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 160px;
  height: 600px;
  margin-top: 60px;
  margin-left: 130px;

  

} 

/* Erste Link   */


.erste {
    
    display: inline;
    width: 728px;
    height: 90px;
    margin-left: 20px;
    
}





footer {
	grid-area: footer;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 6;
    -ms-grid-row-span: 6;
    
    background-color: #99ee7a;

}
8

You can use rem on almost everything that now uses px.
You might want to use px on the media query itself.
Make the media query absolute and the rest of it relative, which is more or less the opposite of what you have now.

In stead of the em in your grid, use rem (relative to the font of the page and not the element itself). Use it also for the gaps and the rows. You can calculate how much rem you need to get more or less the same size as the one in px.
Nothing against the use of em, but I think you need something you can calculate and not too complicated right now.

Replace the font-size by ones in rem as well. Every browser has a basic font-size. I think it’s usually 16px, but you have to check. So this is you starting point. 1rem=16px, 1.5rem=24px, 0.5rem=8px.

If you use something like 0.8rem for the body font-size on a mobile screen everything will be smaller. But for readability it would be better to use the 16px on a small screen and use a font-size like 1.2rem for the body on a larger screen.

The more you make things relative to each other the less you have to solve in the media query. But there are always things that turn out too small or too large. You can use a min- or max-width or -height to set some extra boundaries were needed.

9

tomorrow i will start your recommendations, when a question have, can your asked ?

10

Yes, that’s fine. If you send me a direct message I’ll get in my mailbox, even if I’m not on this forum.

What’s your own language? Mine is Dutch and I do understand a bit of German, but I’m not good at writing German.

11

I am from Basque Country (spain) but now i am in Germany… when for your not problem is, we can on English speak…

12

No problem. Your English might not be so good, but it is a lot better than my Spanish or Basque. :grinning: I don’t speak a word of those languages.
Even in German I wouldn’t get very far.

13

Thanks!, so, we communicate of English…

as 1 year ago, I learn my website to build i had this , later i to change, how now have…I think it is what you to mean…

14

I looked at your code. The media query at screen size 30em changes the font-size to 15px. But the 30em is already related to the font-size that it’s changing. So I don’t think that’s wise.

I use real devices, like the iPad mini, to figure out where I want that media query. I need that to see what I’m doing.

If I think my design will fit on the screen of the iPad mini (in portrait mode = 768px wide, ) then I might choose a media query at 760px. So the layout will change to the mobile version for all phones and smaller tablets, but not for the iPad mini and larger tablets.

But if I don’t think there is enough room, then I might choose a media query at 775px, so the iPad mini, all other small tablets and all phones get the mobile version.

And then I use this to check the layout while I make changes.

If I think it will fit on the iPad mini, then that’s my test case. I write (and rewrite again and again :smile:) the css to make it fit in that format. So all the relative units like rem for margins, paddings and fonts are used to make it look nice on that iPad mini. I don’t have one, so I use the responsive mode in the inspector.

Later I decide if the body on the large screen needs a max-width. But apart from that it’s just a larger version of the layout of the iPad mini.

And the opposite case:
When I think it won’t look good on the iPad mini in portrait, I’ll use something larger, like a the regular iPad or any other tablet a bit larger than 775px wide to make that look good.

For mobile I use the smallest screen. In my case my own iPhone 5s. If it looks good on that, it’ll be okay on most phones I guess.

If needed I’ll use an extra media query, but for that one I also choose a real device to help me visualise what I’m trying to build.

So in a way the real devices are sort of frame in px, and I use the rem/em/vw/vh to relate all the elements to this frame and to each other.

Hope this helps you to decide what you need to change.

15

I have to build my Responsive Site… I don’t end else…

Here can see my Code, I do as your me to tell…

Here how to see it online…