Adding a <br> code / Horizontal Padding to my site

[Current_123]

Hi,

I'm very new to the community and I just need some help adding horizontal spacing between a video overlay and image with text overlay. How do I do this?

Thanks,

J

[Ninthony]

A <br> element is just to break to a new line. It's a common hack for people who don't know HTML or CSS to use breaks or HTML entities like "&nbsp;" to create spaces between their elements. The proper way to do this is to apply margin or padding to the element you want to put space between. Check here for some examples. You can mess with the values for the margins in the CSS section:

https://codepen.io/ninthony/pen/zYYjXPK

[Current_123]

Gotcha thanks! 

padding-top: 40px;

Where do I put this code?

[oscprofessional]

Hello Current_123,

Please share your site url so that i will give you exact solution.

[Current_123]

thanks! 

www.rangeleyflyshop.com

[Ninthony · Accepted solution]

Add this to the bottom of your sylesheet.scss.liquid  in your assets folder:

.shopify-section.overlay-video {
    margin-bottom: 40px;
}

[Current_123]

Awesome got it! Thank you!!! 

And say I wanted to do this to rich text section on the home page would the code be:

.shopify-section.Rich-text {
margin-bottom: 40px;
}

[Ninthony]

close, it would be that but without the capital R and a space between .shopify-section. If you right click and inspect your webpage you can see the source code to find out the class names applied to your elements:

Since in this instance, rich-text is a child of shopify-section you need to add a space like:

.shopify-section .rich-text {
//code here
}

You would leave the space out if the section had a class name of both shopify-section AND rich-text. So if the div looked like this:

<div class="shopify-section rich-text">
//code
</div>

In that case it would be:

.shopify-section.rich-text {
//code here
}

But with the current structure like:

<div class="shopify-section">
  <section class="rich-text">
    Content here
  </section>
</div>

It's:

.shopify-section .rich-text {
//code here
}

[Current_123]

Thank you for this!!! Awesome!!!! :) 

[Ninthony]

No problem. If you have another question about HTML and CSS you can send me a personal message.