Adding space between sections of home page (Venue)

Solved
thosewhobloom
Excursionist
23 1 5

Hello,

 

I am trying to add space between sections of my home page. I've added this code:

.shopify-section { padding-top: 75px; }

But it's added space to unwanted areas such as the top of the page and the bottom. https://thosewhobloom.myshopify.com/ pw abracadabra

 

0 Likes

in which section you want to add space .if you explain me i can code for you.

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
thosewhobloom
Excursionist
23 1 5

Between every section on the home page, but just not the top and bottom of the page. For instance, between the top slide show and "prints by subject matter" and then ever section down from that. 

0 Likes

each section has it's own id ,pick these ids and apply css. it will work.

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
thosewhobloom
Excursionist
23 1 5

something like this?

 

.shopify-section { padding: 75px; }

0 Likes
thosewhobloom
Excursionist
23 1 5

How do I find each of the sections?

0 Likes

through inspect 

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
thosewhobloom
Excursionist
23 1 5

This is an accepted solution.

For anyone with similar problems - I found the solution through some digging and messing around with the code. On my home page, I right clicked the bottom of each image or element and hit inspect. And then either this popped up or was nearby - section--1566456294786. That is the code that you will need to adjust each section and each section is different. Then I went to my theme.scss.liquid file in Theme > Actions > Edit Code and added for each section that I wanted spacing:

 

div#shopify-section-1566456294786 {
padding-top: 0px;
padding-bottom: 75px;
}


Sometimes it was difficult to find the section ID, but it is there and just needs to be found. I have no css experience outside of this. Adjust the px number for more or less space. 

alexandrau
New Member
1 0 1

After hours of searching how to do it, this worked! Thanks!

Juicy-Junk
Tourist
7 0 1

Thank you!! Well written and easy to follow! 
Questions:  When I go to edit code and get to theme.scss.liquid, where do i add the section ID code that you provided? Just anywhere within that section or at the bottom or top?? 
And will this also work for the Debut Theme??

Much appreciated!!