Reduce White Spaces in Between Sections on Desktop and Mobile - Fashionopolism Theme

[ilovemonamona]

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.

[mkamalkayani]

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

[Anthony_David_]

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

[ilovemonamona]

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.

[Anthony_David_]

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

[Anthony_David_]

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

[Anthony_David_ · 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;
}}

[ilovemonamona]

@Anthony_David_ ,

Incredible! It worked! Thank you so much.