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. 
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.