I finished my project and the last problem with adapting to phones remained, in general it looks good on the phone, but when you set the width to 320 pixels, there is a horizontal scroll in 2 sections, I will attach screenshots, here is a link to the repository: https://github.com/Igor-Pysak/layout_landing-page/tree/develop
These are screenshots:
Please help me because I have already spent a lot of time to figure out what the problem is, I looked at similar projects and the structure and styles are similar and not very different, but everything works well for them
GitHub Pages: https://igor-pysak.github.io/layout_landing-page/
I think your problem is that that your product description is 324x88 and does not adapt to the maximum of 320. What you need to make sure is that the horizontal scroll is not present (and you can do that by doing this): overflow-x: hidden; on the body/html element.
Than you need to limit the size of the description for mobiles:
@media (max-width: 320px) {
.product__description {
max-width: 320px;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
}
Doing this the text now is maximum 320 px. Make sure to make the text 320px (and disable the .container padding) or make it smaller and reduce the .container padding size.
Last thing to do after this is to apply the max-width to .product__photo too since it's overflowing too.
Tell me if you need more help with this!