Jump to content

Product page view gets scrambled when downsizing window.

Recommended Posts

Site URL: https://www.intro-verso.com/all-new-products

Hello,

 

On my webshop I use a coded 'carousel' style layout for my products. There is each time a row of 2, then 3 products and so on.

However when the webpage window gets made smaller, my product page loses all of its structure and the products scarmble in a random and not attractive order (see screenshot).

Is there a way for me to code so that once the window is made smaller, the products move to a linear view of 1 product per line? This instead of them randomly scrambling.

Any help achieving this is much appreciated!

Screen Shot 2022-04-07 at 12.53.14.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

@media screen and (max-width:1250px) {
div.ProductList-grid div.ProductList-item {
    width: 100% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:1250px) {
div.ProductList-grid div.ProductList-item {
    width: 100% !important;
}
}

 

Thanks a lot @tuanphan!

 

Is there also a code to keep my original structure no matter how much I downsize the window? Instead of changing the product view to 1 per row in a smaller window.

I think I might prefer that, so ideally I'd like to compare both options.

Thanks again!

Mathias

Link to comment
On 4/11/2022 at 4:49 PM, Mathias654321 said:

Thanks a lot @tuanphan!

 

Is there also a code to keep my original structure no matter how much I downsize the window? Instead of changing the product view to 1 per row in a smaller window.

I think I might prefer that, so ideally I'd like to compare both options.

Thanks again!

Mathias

Find this code & edit 992px to 1px

@media screen and (min-width: 992px) {
    .ProductList-grid {
        display:flex;
        flex-wrap: wrap
    }

    .ProductList-grid>div:nth-child(5n+1),.ProductList-grid>div:nth-child(5n+2) {
        width: 48.6666% !important;
        margin: 8px !important
    }

    .ProductList-grid>div:nth-child(5n+3),.ProductList-grid>div:nth-child(5n+4),.ProductList-grid>div:nth-child(5n+5) {
        width: 32% !important;
        margin: 8px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...

Hi @tuanphan,

Changing the the px to 1 in the code didn't resolve this issue for me. 

Still when I downsize my window, my product listings either scramble or go to the 1 per row display.

Ideally I'd like to keep the structure as initially inted in the 2 then 3 row configuration.

Any chance you know what the issue might be?

 

Thanks a lot for your help,

Mathias

Link to comment
On 2/28/2023 at 8:48 PM, Mathias654321 said:

Hi @tuanphan,

Changing the the px to 1 in the code didn't resolve this issue for me. 

Still when I downsize my window, my product listings either scramble or go to the 1 per row display.

Ideally I'd like to keep the structure as initially inted in the 2 then 3 row configuration.

Any chance you know what the issue might be?

 

Thanks a lot for your help,

Mathias

Which screen size do you see problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 3/5/2023 at 3:29 PM, tuanphan said:

Which screen size do you see problem?

Hi @tuanphan,

Can you elaborate what you mean by this? 

When my browser window is at max size, the products display as intended in the 'carousel like configuration' (2 then 3 pictures per row). However when I downsize the window, the products jump to display 1 item per row. Ideally I'd like my structure to stay in the 'carousel' like structure, even if I downsize the window.

I checked on a friends laptop, and on there my product page shows 1 item per row. So it doesn't even start with the carousel like display. I assume this is because of when the window is below a certain pixel range, the code demands the product display to jump to 1 item per row.

Any idea how I can code so that I can keep the same structure no matter how small my browser window gets?

Appreciate your time and help!

Mathias

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.