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:

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: /

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:

https://ibb.co/jP3RdMf5

https://ibb.co/7tkVDgNh

https://ibb.co/mFyFmHw4

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/

• html
• css
• sass

• 1 Your "View All" button is too wide for a 320px screen. – KIKO Software Commented Feb 8 at 10:16
• @KIKOSoftware You save my life, thanks so much – Mineral Commented 2 days ago

1 Answer 1

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!