carnagelan Posted June 16, 2020 Share Posted June 16, 2020 Hi Guys I have been googling and cant seem to come right where people say i need to edit global.css where in the default theme i only have theme.css. As the picture shows the list of products is smaller in width than the banner. I need to edit css so the product list matches the width of the banner only in mobile view as the desktop view is ok. Link to comment Share on other sites More sharing options...
Luis C Posted June 17, 2020 Share Posted June 17, 2020 (edited) 20 hours ago, carnagelan said: Hi Guys I have been googling and cant seem to come right where people say i need to edit global.css where in the default theme i only have theme.css. As the picture shows the list of products is smaller in width than the banner. I need to edit css so the product list matches the width of the banner only in mobile view as the desktop view is ok. Well... mobile view is a bit generic.. Each smartphone has its unique screen resolution to match, and even like that, Media queries don't really work on a pixel perfect pattern (I mean, a mobile phone can use 1080 x 1920p screen, but its viewport width could perfectly be all the way from 378 to 480p on portrait) With that in mind, I'd recommend setting a media query for devices up to 480p width and applying a new rule for the thumbnail-container. If you're using prestashop 1.7, chances are you have a theme.css, and an empty custom.css. Add your new media query to your custom.css to override classes declared in your theme.css without modifying the default settings @media (max-width:480px) { #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container { width: match your banner width; height: fixed height to match your image height + product title; } } Edited June 17, 2020 by Luis C (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now