Adjust padding between table in header section & the images in the collection

Solved
Highlighted
Tourist
11 0 2

Hi-

 

This community has been incredibly helpful in the past and I am looking for assistance once more. 

 

I have create a table with two columns in the header part of a collection page. I have placed a YouTube video in one column and my text in the other. It looks pretty darn good except for the space between the table bottom and the start of the collection images. Can that be adjusted ?

 

Here is the collection page I am referring too: https://novattoinc.com/collections/glass-vessel

 

Thank you again for any help with this-

Musette

0 Likes

Success.

Shopify Partner
111 9 22

Hey there! I can help you out with this. For the space above and below your table, you'll want to go to edit code > timber.scss > control or command f to search > and search for .rte--header. Then where it says margin-bottom: 30px, replace that with: 

.rte--header {
margin: 80px 0;
}

Me personally, i would create a new class to use on this. Perhaps it's pulling elsewhere, that you wouldn't want extra margins on. Either way, you can change 80px to however much margin is good for you. Just mess with it until you have enough space on the top and bottom of the rte--header class. Hope this helps you out! :) 

 

 

 

 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
11 0 2

Thank you C. Martinez. That got me so much closer to closing the gap! I just do not want to close up the space on top any more. I now think the padding allotted for the collection images on the first row need tweaking. I will write a new request. I don't want to mess this one up for your explanation was perfect and spot on.

 

Just FYI for others who will find this help wonderful, my navigation was just a bit different: Online Store > Themes > Actions > Edit Code>  search for timber > timber was found in Assets > timber.scss.liquid

1 Like

Success.

Shopify Partner
111 9 22

Glad that worked! Happy that i could help. If you want separate margins on top and bottom, just define the margin top and bottom. For this example, the vertical space on the bottom will be larger than the top, like so:

 

.rte--header {
margin-top: 25px;
margin-bottom: 40px;
}

 

I don't want to confuse you with sass variables, but this is an easy, straight forward solution to your problem. Take care :) 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
6 0 0

I have no clue but went to your page to see if it was something I wanted to do... and I think it looks great the way it is now. And you have me wanting a new sink. Some of those are just beautiful! : )


0 Likes
Tourist
11 0 2
Awwww than you. 😊 See something you like let me know. If one of our vendors/ showrooms are not running a special or a discount that involve us, we can. *-)

Musette Steger

3533 E. Corona Ave
Phoenix, AZ 85040
P: (844) 404-4242

[cid:image001.png@01D3847A.DBDA4DF0]

[grey social media icons][grey social media icons][grey social media icons]
0 Likes
Tourist
11 0 2
Ooo-h. Thank you for the code! 😊 Save me time going to w3schools to confirm my coding thoughts. Thank you CM.

Musette Steger

3533 E. Corona Ave
Phoenix, AZ 85040
P: (844) 404-4242

[cid:image001.png@01D3847A.DBDA4DF0]

[grey social media icons][grey social media icons][grey social media icons]
0 Likes
Shopify Partner
111 9 22

You're so welcome! Anytime :)

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes