Hi I’m looking to add more white space between certain sections and images on mobile only on my home page https://luxurymrkt.com
Topic summary
A Shopify store owner seeks to add more white space between sections and images on their homepage’s mobile view at luxurymrkt.com. They provided screenshots showing the current mobile layout.
Multiple solutions offered:
-
CSS modifications to base.css file: Several responders suggested adding custom CSS code targeting mobile screens (max-width: 767-768px) to increase margins between grid items and sections
-
Alternative approach: One suggestion recommended adding code to the theme.liquid file before the closing tag instead
Implementation steps:
- Navigate to Online Store → Themes → Edit code
- Locate either assets/base.css or theme.liquid file
- Insert provided CSS code with margin adjustments (typically 40-60px)
- Target specific section IDs or grid elements for spacing
Status: Multiple vendors (harivishwakarma, Ujjaval, GemPages, PageFly-Victor) provided competing solutions with code snippets. The discussion remains open with no confirmation of which solution was implemented or successful.
Hallo @Luxurymrkt
You can add code by following these steps to change
- Go to Online Store → Theme → Edit code > assets > base.css
paste below code at bottom(base.css)
**@media only screen and (max-width: 767px) {**
**.grid__item.medium-up--one-third.text-left.aos-init.aos-animate {**
**margin-bottom: 50px;**
**}**
**div#shopify-section-template--15648732545205__165946488140ce3d56 {**
**margin-top: 60px;**
**}**
**}**
If you require any further information, feel free to contact me.
Best regards,
@Luxurymrkt Add below css into base.css file (Online store->themes->Edit code->Assets->base.css)
@media (max-width:768px)
{
.grid--flush-bottom>.grid__item {
margin-bottom: 40px !important;
margin-top: 40px;
}
}
Hello @Luxurymrkt ,
It’s the GemPages Support Team and we are glad to assist you today!
I would like to give you the recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
Let us know how it works for you.
Best regards,
GemPages Support Team
Hi @Luxurymrkt
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
1 Like