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

Solved
Tourist
7 0 0

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

0 Likes
Astronaut
944 114 213

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

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
7 0 0

Gotcha thanks! 

 

padding-top: 40px;

 

Where do I put this code?

0 Likes

Hello 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
7 0 0
0 Likes

Success.

Astronaut
944 114 213

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

 

.shopify-section.overlay-video {
    margin-bottom: 40px;
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
7 0 0

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

0 Likes
Astronaut
944 114 213

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:

inspector-help.jpg

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
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
7 0 0

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

0 Likes
Astronaut
944 114 213

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

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes