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

Css – Unnecessary indentation on the site in the line

The problem is in the mobile version of the site, either in flexbox, or in svg, or in width, which I don’t understand. Devtools shows that there are indents from svg and the text itself has indents

The site itself

I need the lines to be the same on the mobile version of the site. With a small font, everything is fine

Tags:

2

Answers


  1. 0

    what I understood from the code, your .icon class consists of width of 20vw, but your .desc class doesn’t have any width.

    Now for the section "Fast speed" the content is so small it able to fit itself in a smaller container but rest of them can’t as these are all display flex, even though you have added 20vw, it is only getting applied where there is space which is "Fast speed", rest of the .icon class are smaller than 20vw. Hence it is appearing indented.

    One solution could be to add width property to .desc class like

    .desc {
 width: 80vw;
}

    Another solution could be in mobile version.

     .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  /* width: 20vw; */
  padding: 0px 15px;
}
    Login or Signup to reply.
  2. 0

    I would add a max-width and a little margin to your .icon css class.

    I would also recommend ditching the height in the .desc class and replacing it with a margin to line everything up.

    .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    max-width: 10vw;
    margin: 0 10vw;
}

.desc {
    display: flex;
    flex-direction: column;
    margin: auto 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search