Spacing between my featured image and featured content

carla27
Excursionist
44 0 16

I need help with adjusting space between the bottom of my featured image and the start of my header for featured content.

Right now where it says Meet... it is sitting right under the end of the image and I want a bigger gap

Screen Shot 2021-06-30 at 2.03.51 pm.png

0 Likes
Pallavi
Shopify Expert
2221 363 474

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
carla27
Excursionist
44 0 16
dmwwebartisan
Shopify Partner
7346 1736 2319

@carla27 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

div#section-1624939187e4928919 {
    padding-top: 50px;
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
carla27
Excursionist
44 0 16

thank you so much!! 

I also want to change to image sizes of the images underneath, how will I do that?

@dmwwebartisan 

0 Likes
f_malik
Excursionist
18 3 5

Hi there!

add this code in your css file and change 70px with your desired padding 

.shopify-section.featured-content-section .box {
    padding-top: 70px;
    padding-bottom: 70px
}
0 Likes
carla27
Excursionist
44 0 16

Hi, i added that to the bottom but my images have stayed same size 

@f_malik 

0 Likes
f_malik
Excursionist
18 3 5

Sorry for the misunderstanding that was for adding space after image. Add this for changing image size and change max-width value

 

.shopify-section.featured-row-section .placeholder-svg {
    max-width: 385px;
}

 

0 Likes
carla27
Excursionist
44 0 16

thank you that worked!! do you know if there's any way to make the image more wide (like longer) so it fills up the gaps

@f_malik 

0 Likes
Pallavi
Shopify Expert
2221 363 474

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.featured-row-section .grid__item {
margin-bottom: 0;
}

.featured-row-section .grid__item svg.placeholder-svg {
max-width: 340px;
margin: auto;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes