A Shopify store owner using the Venture theme wants to reduce the size of collection items on their homepage. Currently, each collection takes up the full mobile screen width, and they want to display two collections side-by-side instead.
Proposed Solution:
A community member provided CSS code to be added to the theme’s main CSS file (theme.scss.css) that uses media queries to set collection width to 50% on mobile devices (400px-749px).
Current Status:
The solution hasn’t worked yet due to file location confusion. The original poster placed the code in “theme.scss.liquid” but was instructed to use “theme.scss.css” in the Assets folder. However, they report not having a file with that exact name—only “theme.scss.liquid” exists in their theme files.
The discussion remains unresolved as they’re trying to identify the correct CSS file for implementing the mobile layout changes.
Hi all,
I am hoping to change my collections on my homepage to be smaller. On mobile they currently take up a whole page each, I would love to get 2 collections across instead of just one if possible, attached some pics for reference, using venture theme. URL: www.oddityasylum.com
@OddityAsylum Please provide with the Website URL.
hi,
My URL is www.oddityasylum.com
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (min-width: 400px) and (max-width: 749px) {
.medium-up--one-third {
width: 50%;
height: 100%;
}
.medium-up--one-third .featured-card--contain {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 60vh !important;
padding: 0 20px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi,
Thanks for the help! Unfortunately that didnt change anything. I placed it in the “Theme scss.liquid” file which was closest to the main css file you mentioned, but no changes.
No, not liqud. On the asset folder add on the theme.scss.css. In the very last } on this file. Thanks!
I do not have that file the closest I have is theme.scss.liquid. I do not have a file named theme.scss.css, I have none named base or style either. Closest I have to any of those is theme.scss.liquid In assets folder, Is there another file it could be?
