Single Column Collection Pages on Mobile (Empire Theme)

Store Design
1

Hello! Currently, our collection pages look like this on mobile: https://prnt.sc/BKV9AX6xtMLd. So you see it’s got two columns and it makes the thumbnails very small.

Is there a simple way to set it to display 1 column on mobile so that the thumbnails will be larger? It’s not a setting on the theme for Collection Pages, and I haven’t found anything so far by clicking around in the code. Any guidance would be awesome - thanks!

2

Hi @BentonsBacon ,

Please share preview URL of the store

3

Hi @Reena_Soni , sure thing! The shop is https://www.conquestmaps.com/

And the collection pages I’m referring to are any of the /collections/ URLs, e.g., /collections/usa-push-pin-travel-maps

Thank you!

4

@BentonsBacon

Go to Online store > Actions > Edit Code

In Asset Folder > Search for theme.css

Add this below code at the bottom of theme.css in file

@media only screen and (max-width: 600px) {
    ul.productgrid--items.products-per-row-4 {
        display:block
    }
}
@media only screen and (max-width: 600px) {
li.productgrid--item.imagestyle--medium.show-actions--mobile {
    width: 100%;
    margin-left: 0;
}
}

@media only screen and (max-width: 600px) {
.productgrid--items.products-per-row-4 .productgrid--item:nth-child(-n+2){
  margin-top:10px;  
}}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.

5

Looks like it works perfectly - thank you!