Question 379239 in CSS Question posted in
Some basic documentation can be found here.

Css – When I reach the breakpoint 480px, the right padding that I set on body disappears

I have some articles in my code which has a display of grid. I have set the padding of the body to padding: 0 1em; and the min-width of the following elements and classes to 450px;

can someone please tell me why the padding on the right disappears when I go lower than the breakpoint 480px???

Here is a screenshot of my page below breakpoint 480px:

Screenshot of my website:

Here is a snippet of my css:


body{
      padding: 0 1rem;
}

/* Media Queries */

.article-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, auto));
      column-gap: 30px;    
      row-gap: 50px;
}



/* Utilities */

nav,
.article-container,
article,
.jour-hero,
.about-hero{
      margin: 0 auto;
}

footer,
nav,
.jour-hero,
.about-hero,
.hero{
      min-width: 450px;
}


nav,
.jour-hero,
.about-hero,
.hero,
.article-container{
      max-width: 1600px;
}
Tags:

2

Answers


  1. 0

    Rahul was close with his comment, but it’s actually the margin that you set. The column-gap property won’t have any effect if there’s only one column, but you have a margin of 1rem on each side. 1rem is almost always 16px, so that will add up to 482px. If you don’t want to go about creating an entirely different layout, I’d change that width from min-width: 450px to min-width: min(450px, calc(100vw-2rem)).

    Login or Signup to reply.
  2. 0

    It is because you are using min-width's in your CSS.

    If your display only has a width of e.g. 300px, your elements (marked with min-width) will be bigger than your display.

    Exactly the problem you are encountering.

    Solution:

    Get rid of all static px measure units in your CSS, which are used for your page layout, and use responsive measure units like % or even better the flex layout.

    As addition and/or alternative you can implement media queries, which allow you to assign CSS only to devices with a width lower than 500px for example.

    From dev to dev:

    Some will hate me for that, some will love me for that:

    It is a good practice to use this CSS and eliminate many Problems with it:

    *{
    box-sizing: border-box;
}

    This CSS code snippet sets the box-sizing property of all elements to border-box. This means that padding and border are included in the element’s total width and height, rather than being added to the outside. It’s a useful way to ensure consistent sizing in layouts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search