How do I reduce or eliminate white space between sections

[llamasteinc]

Hi all, I am using the shopify symmetry theme and would like to eliminate or at least reduce the size of the white space on the top and bottom of each section on this page: http://llamaste.com/pages/class-packages-and-memberships. I did a search for past discussions and while some came up, some of the solutions seemed to refer to a theme.scss.liquid  in the Assets folder, which in my case such a file does not exist. There is a theme.liquid file in layouts and also a styles.css.liquid in assets. Any help would be greatly appreciated

[AvadaCommerce · Accepted solution]

Hi @llamasteinc ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:

.strongly-spaced-row, .fully-spaced-row--medium {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[llamasteinc]

It worked! Thank you so much!

[llamasteinc]

Thanks again for your help! I posted another question, but I guess I'll ask it here. I have enabled sticky menu, however, it is not working on 3 of my pages: 

https://llamaste.com/pages/class-packages-and-memberships

https://llamaste.com/pages/class-schedule

https://llamaste.com/pages/workshop-events

I tried a few solutions which entailed disabling the sticky menu and entering code in the theme.json and I think styles.css. While this made the menu sticky, it made the store messages unseeable. I ended up removing the code and putting everything back to the way it was. Do you have any ideas for this?

[AvadaCommerce]

Hi @llamasteinc ,

This section deals with custom work. You should hire a shopify expert for assistance.

Thanks you

[llamasteinc]

ok thanks

[llamasteinc]

So understood about the sticky menu. Another question I have. On my homepage I added some custom liquid to display a clickable badge. There is a ton of whitespace on the bottom. Below it is a gallery and the left most image is being pushed lower than the other two. See screenshot and code which was supplied to me by the owner of the logo. Any ideas?

Code:

<div style="width:100%;text-align:center;">
<a href="https://www.expertise.com/ny/brooklyn/yoga-studios" target="_blank" style="display:inline-block; border:0;" /> <img style="width:200px; display:block;" width="200" height="160" src="https://res.cloudinary.com/expertise-com/image/upload/f_auto,fl_lossy,q_auto/w_auto/remote_media/awa..." alt="Top Yoga Studio in Brooklyn" /></div>

[AvadaCommerce]

Hi @llamasteinc 

Can you send me the link of the page with this part so I can check it for you

Thanks you

[llamasteinc]

sure! it is https://llamaste.com/pages/class-packages-and-memberships

I have since shrunk it down and moved it to the footer (which I think is actually the better place for it) but ideally I would like it to be below the social media icons on the left side of the footer (or on the left side of the sm icons on the mobile site). I tried pasting it there in assets/footer.liquid but made the credit card icons clickable, so I pasted the code further down instead just above the copyright info. Let me know if you have any ideas. Thanks again!

[avaskye]

Hi @AvadaCommerce ! For some reason, I'm trying to follow this but I don't see Asset->/styles.css under my Symmetry theme. Is there another location where we can put your code in order to reduce the spacing between each section?