Adjusting height of section's background color

Solved
Dike
Excursionist
61 0 23

Hello everyone,

I was wondering if its possible to change the background color height of a section.

 

Screen Shot 2021-11-19 at 15.44.00.png

I would like the height to stop somewhere mid photo, and the lower part lowered so the button fits nicely into the colored background. Preferably with some pixel or something in that nature code, so I can get the perfect fit through testing various sizes.

Any help is greatly appreciated!

Thank you.

URL: https://glowee.nl/

Accepted Solutions (3)

Accepted Solutions
KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

yes please try this code

add this code your css file bottom of the file 

.multicolumn.background-none {
    display: inline-block;
    width: 100%;
    padding-bottom: 50px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

do you need half background color?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

can you try this code

#shopify-section-template--15290490290398__16372376068d4eb299 .multicolumn {
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#fff3eb 100%);
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)
Dike
Excursionist
61 0 23

Still need help, thank you!

KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

yes please try this code

add this code your css file bottom of the file 

.multicolumn.background-none {
    display: inline-block;
    width: 100%;
    padding-bottom: 50px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Dike
Excursionist
61 0 23

Thank you so much @KetanKumar 

The bottom padding works perfectly. I tested various ratios but I think I can't get the look I was going for. Do you know how to lower the top padding drastically?

Example:
example.png

KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

do you need half background color?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Dike
Excursionist
61 0 23

@KetanKumar Yes around half if possible. If I'm able to adjust the height by changing pixel numbers it would be perfect.

KetanKumar
Shopify Partner
24923 2498 9041

This is an accepted solution.

@Dike 

can you try this code

#shopify-section-template--15290490290398__16372376068d4eb299 .multicolumn {
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#fff3eb 100%);
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Dike
Excursionist
61 0 23

Thank you so much the both of you @KetanKumar @Savior They both look amazing!