Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Hello! I am looking to shorten the white spaces in between all of the sections on my homepage. They appear like this on both desktop AND mobile. The website URL is ilovemonamona.com. I am using the Fashionopolism theme.
When I stretch my desktop browser to fill up the entire screen, the white spaces shrink (see below). I would like for the spaces to be fixed, if possible, so that the size of the browser doesn't affect the size of the spaces. I want them to always be minimal on both desktop and mobile. Any suggestions are greatly appreciated!
Side note: I've been doing some research and most threads are saying to alter the end of theme.scss.liquid. I am not finding this in the code for Fashionopolism, but instead under Assets I see stylesheet.css and theme.js. There is also, of course, theme.liquid under Layout. I thought that might be worth mentioning.
Solved! Go to the solution
This is an accepted solution.
@ilovemonamona Check the message I have sent
Add the below CSS it works for mobile too
#shopify-section-1625966894ea81e1b6 .parallax-1625966894ea81e1b6 .parallax__container {
height: auto !important;
min-height: auto !important;
}
@media only screen and (max-width: 740px){
.parallax .parallax__container {
height: initial!important;
min-height: auto!important;
}}
Hi,
making a change like this requires knowledge of html and css. I won't suggest modifying the theme files yourself unless you have at least some basic knowledge of html and css. Instead you can focus on your core business and leave these type of things for the developers.
I offer you to make this change for free, in a hope to develop a long term relationship, if you are interested please send me a personal message and we can discuss the details.
Thank you
Kamal
Hi @ilovemonamona ,
on your theme > actions > Edit code > stylesheet.css > on the edit of the file add the below code
#shopify-section-16259642236e7cf9b1 .parallax-16259642236e7cf9b1 .parallax__container {
height: auto;
min-height: auto;
}
div#shopify-section-1625767481c699d86b .homepage-section {
padding-top: 0 !important;
}
Hope this works
Thanks
Hello @Anthony_David_ , thank you so much for your help!
This seemed to eliminate the excessive spaces at the bottom of the page, but the space between the first image the the "Best Sellers" collection remains. Do you suppose this might be due to how the "The Summer Collection is here!" image shrinks whenever the browser gets smaller?
Also, the code did not affect the mobile website. I will continue to do my own research, but your thoughts on this are greatly appreciated. Thank you for your time.
Add the below code it also includes for mobile.
.shopify-section-1625966894ea81e1b6 .parallax-1625966894ea81e1b6 .parallax__container {
height: auto;
min-height: auto;
}
@media only screen and (max-width: 740px){
.parallax .parallax__container {
min-height: auto !important;
}
}
Hope this helps
Hello @ilovemonamona
#shopify-section-1625966894ea81e1b6 .parallax-1625966894ea81e1b6 .parallax__container {
height: auto !important;
min-height: auto !important;
}
@media only screen and (max-width: 740px){
.parallax .parallax__container {
height: initial!important;
min-height: auto!important;
}}
Hope this helps
This is an accepted solution.
@ilovemonamona Check the message I have sent
Add the below CSS it works for mobile too
#shopify-section-1625966894ea81e1b6 .parallax-1625966894ea81e1b6 .parallax__container {
height: auto !important;
min-height: auto !important;
}
@media only screen and (max-width: 740px){
.parallax .parallax__container {
height: initial!important;
min-height: auto!important;
}}
Incredible! It worked! Thank you so much.
User | RANK |
---|---|
151 | |
94 | |
65 | |
58 | |
51 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By