Product display

[papabill]

I am having an issue with how my products display.  When the page loads, they will be in rows, and then they change to a single column. I am using the theme "Dawn". I had just changed to this theme because my previous theme was having other issues. I have gone into product grid and set that to 6, but makes no difference. Any ideas on how to correct this? Thanks!

[BSS-TekLabs]

Hello @papabill 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[papabill]

papabillspsp.com

[Acme]

Hi, @papabill 
Could you please share your store url(password)?

[papabill]

papabillspsp.com

[Acme]

1. Go to online store -> theme -> edit code.

2. Open component-slider.css and then find out follow block, add "display: flex"

@media screen and (min-width: 990px) {

    .slider-component-full-width .slider--desktop {

         scroll-padding-left: 1.5rem;

         display: flex;

     }

}

[BSSCommerce-HDL · Accepted solution]

Hi @papabill 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
        .grid.product-grid.grid--4-col-desktop.grid--2-col-tablet-down {
            display: flex!important
}
        .product.product--large.product--left.product--stacked.product--mobile-hide.grid.grid--1-col.grid--2-col-tablet {
            display: flex!important;
        }
    </style>

 Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSS-TekLabs]

- Here is the solution for you @papabill 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (min-width: 600px) {
 .grid.product-grid {
display: grid !important;
    grid-template-columns: auto auto auto auto auto auto !important;
}
.grid__item.slider__slide {
 max-width: 94% !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.