Width of product list to match width of banner

[carnagelan]

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.

[Luis C]

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)