Alignment problem in mobile view

[Presta_beginner]

Hello,

The products are shifted left in mobile view as show in the picture. they are okay in desktop view. I am using version 1.7.7.0. How to fix this problem?
 

[Prestachamps]

Hi, 

I presume that is a Css issue, or a structuring issue . Can you please share a URL, as than I can inspect it and tell you exactly where the problem lies. If it's a CSs issue, I could even tell you what to change!

Kind Regards, 

Leo

[Presta_beginner]

http://store.robocool.eu/3-for-schools

[Prestachamps]

Hi , 

Inside :http://store.robocool.eu/themes/classic/assets/css/theme.css

Search for : 

@media (max-width: 767px)
#products .product-miniature, .featured-products .product-miniature {
    margin: 0 auto;
}

and replace it with:

@media (max-width: 767px)

theme.css:7

#products .product-miniature, .featured-products .product-miniature {

margin: 0 4.8rem;

}

This is not the best solution, as there is a wrong rule somewhere, but thought to help you asap. 

Let me know if it did the job. 

Cheers, 

Leo

 

[Presta_beginner]

Thanks very much! it works

[varkeychen]

Hi

I have got another idea, seems to be perfect -

Just find the string in themes/classic/assets/css/custom.css -

"#products .products, .featured-products .products, .product-accessories .products, .product-miniature .products"

Comment the value 'justify-content: flex-start' (make it like this - /*    justify-content: flex-start */)

I hope this will solve the problem.

KC Varghese