Jump to content

Width of product list to match width of banner


Recommended Posts

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.

Capture+_2020-06-16-13-55-17.png

Link to comment
Share on other sites

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.

Capture+_2020-06-16-13-55-17.png

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 by Luis C (see edit history)
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...