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

Solved
ilovemonamona
New Member
3 0 0

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.

too_much_space.jpg

 

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.

 

larger_browser.jpg

0 Likes
mkamalkayani
Explorer
65 5 5

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

0 Likes
Anthony_David_
Trailblazer
221 29 87

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




Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
0 Likes
ilovemonamona
New Member
3 0 0

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?

spaced_improved.jpg

 

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.

 

mobile_spaced_unchanged.jpg

0 Likes
Anthony_David_
Trailblazer
221 29 87

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

  

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
0 Likes
Anthony_David_
Trailblazer
221 29 87

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

 

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
0 Likes
Anthony_David_
Trailblazer
221 29 87

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;
}}

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
0 Likes
ilovemonamona
New Member
3 0 0

@Anthony_David_ ,

Incredible! It worked! Thank you so much.

0 Likes