Image with text: Add padding to top of first section

Image with text (also known as Image and text on older versions of Pipeline) is designed to stack sections together and works nicely when you alternate the image and text positions:

If you use a section module on top that has padding, then the series of Image and text sections work nicely:

However, if you stack the series below a full-width section module like Image with text overlay (banner), Slideshow or Featured video; you won't have any padding above the first section. 

Example of Image and text after a full-width section module:

Code to add for Pipeline 3 and higher:

/* -- code to add padding to top of first Image and text section -- */
#shopify-section-index-double .homepage-double:first-of-type {
    margin-top: $gutter;
}
/* - end - */

Notes: The $gutter; is 30px. If you want to increase the amount, you can use a manual px value like: 60px;

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code


Code for Pipeline 2

If you're using an older version of Pipeline (link at the bottom to check which version you're using), the code option is not as simple.

All the homepage sections share a similar class called: .shopify-section

In order to target the first Image and text section, we'll need check the code for the unique section ID or count the number of sections used before the Image and text section.

If the Image and text is the 4th section on your homepage, then you can use this code:

.shopify-section:nth-child(4) .homepage-double {
    margin-top:$gutter; 
}

You might have to experiment with that value. Count each section after your header/navigation including the first Image and text section.

This is the number you'll want to change:

Example of counting sections:

These are all turned on as the eye icon is showing these sections. 

If you have a hidden section:

Your value should be now 3.

Example code if your first Image and text is the 3rd section:

.shopify-section:nth-child(3) .homepage-double {
    margin-top:$gutter; 
}

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us