My design is crashing on mobil. Why?

When i check on small screen at chrome it’s well, but on mobile phone
the design is chrashing. I made the buttons with display flex and the size values are given as a percentage %, so they resize themselves and I think shouldn’t stick together and in chrome it doesn’t stick on the small screen, but on mobile it looks different.

Hello @yasinkarax,

It is difficult to help without the code. If you are using Flexbox, I would say that there is somewhere in your code you should check for the justify-content or align-items properties. Are you using media queries?

Right, you can check here.

I would suggest trying gap and justify-content: center

.buttons {
  height: 400px;
  width: 80%;
  display: grid !important;
  grid-template-columns: repeat(4, 20%);
  grid-template-rows: repeat(5, 18%);
  gap: 0.6rem;
  justify-content: center;

Didn’t test it on a phone. What phone and browser is the image from?

BTW, you will still get some overflow on the delete button (the icon will overflow the button at some point).

Hi there! I think is better if you not use the percent but px so the size will be standart. Also it will be good if u use min-width at the outer parent box so the shape will not break. :slight_smile: :upside_down_face:

the images is from chrome and oppo. the delete button is icon from font-awesome. your code is fixed the issue. thank.

I will learn a lot of about responsive. thank you.