Slight Layout Issue

[tessthepup]

I have a slight issue with a coupe of viewport sizes.

The image below is from 768x1024 and as you can see it is a bit squished.

Does anyone know what to change to alter the breakpoint so that it is not all squished up?

[heatherbell]

The image below is from 768x1024 and as you can see it is a bit squished.
Does anyone know what to change to alter the breakpoint so that it is not all squished up?

You are not clear what element you consider 'squished'.
Guessing you mean 'Featured Products' elements?
That is an addon so don't know where that is configured. It could be in the addon files or taken from https://phoenixcart.org/phoenixcartwiki ... ct_Listing Products Per Row
Your browser Dev Tools should allow you to play with changes and 768x1024 is around the sm to md breakpoint so play with that.

[tessthepup]

The image below is from 768x1024 and as you can see it is a bit squished.
Does anyone know what to change to alter the breakpoint so that it is not all squished up?

You are not clear what element you consider 'squished'.
Guessing you mean 'Featured Products' elements?
That is an addon so don't know where that is configured. It could be in the addon files or taken from https://phoenixcart.org/phoenixcartwiki ... ct_Listing
Your browser Dev Tools should allow you to play with changes and 768x1024 is around the sm to md breakpoint so play with that.

Thank you for your reply.

Basically everything is 'squished' Featured Products, New Products, Related Products and Product Listing.

I need the layout to switch from 5 products across to a maximum of 3 or 4.

[heatherbell]

Basically everything is 'squished' Featured Products, New Products, Related Products and Product Listing.

So, I can still only guess, only you can see the code in the files you are using but you can confirm the breakpoint classes on the elements with your browser Dev Tools.

[tessthepup]

Basically everything is 'squished' Featured Products, New Products, Related Products and Product Listing.

So, I can still only guess, only you can see the code in the files you are using but you can confirm the breakpoint classes on the elements with your browser Dev Tools.

I have managed to sort my issues by changing each of the template files (in override of course) from

Code: Select all

<div class="col mb-2">

to

Code: Select all

<div class="col col-md-4 col-sm-4 mb-2">

and then adjusting the amount of products displayed to fill the gaps.

[ecartz]

Note for others who may be reading this: the recommended process is to change the product listing layout as described at https://phoenixcart.org/phoenixcartwiki ... ct_Listing under "Products Per Row".

Doing things that way avoids having to override the template files and changes all of them at once.