Solved

How to change the height of the section of custom contect

John-Yixiaobao
Tourist
7 0 5

 

Hi @Shopify

 

I am using "custom content section" to create a BUY NOW button to place it in the home page. 

But I realize that the "custom contect section" occupied big space, which make the "button" was placed far from the upper section. so I was trying to edit the code to decrease the height. Please let me know how, thank you. my theme is Debut. 

John

WechatIMG246.png

Accepted Solutions (2)
ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

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

div#shopify-section-1620876630cd872b4c {
padding-top: 0;
height: auto;
}

div#shopify-section-1620876630cd872b4c center a.btn.hero__btn {
margin-top: 0;
}
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

View solution in original post

Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

@John-Yixiaobao 

Hello,

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1620876630cd872b4c {
padding-top: 0px;
}
#shopify-section-1620876630cd872b4c .custom__item {
margin-bottom: 0px;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 20 (20)

Hardik29418
Shopify Partner
2858 407 1073

Hello, @John-Yixiaobao 

Welcome to the Shopify Community.

I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
John-Yixiaobao
Tourist
7 0 5

Hi Hardik, 

thank you. 

https://yrhandlock.com/

it's our website, thank you

Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

@John-Yixiaobao 

Hello,

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1620876630cd872b4c {
padding-top: 0px;
}
#shopify-section-1620876630cd872b4c .custom__item {
margin-bottom: 0px;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
John-Yixiaobao
Tourist
7 0 5

Thank you Hardik, it was solved. Thank you for your code. You are all Pros

ZestardTech
Shopify Expert
5393 970 1291

Kindly feel free to get back to me if you need any further assistance Thanks!

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
John-Yixiaobao
Tourist
7 0 5

WechatIMG248.png

here is the final layout, I like it

guyv
Trailblazer
246 0 67

@ZestardTechand @Hardik29418 please can you assist me?

 

I want to do the same thing but I can't make it work with the code you've provided.

 

My website is www.electricrideco.com

 

I have a custom html section on my homepage containing icons and I would like to change the height of the section.

 

I would like the section to be changed to approx. the height of the red box in the screenshot below:

 

Screen Shot 2022-02-21 at 6.53.22 PM.png

 

 

Thanks in advance for your help.

alexfc
Shopify Partner
20 4 3

@guyv

In line 5501 of your theme's file assets/theme.scss you will find this code:

 

.section-block--padding {
  padding: 30px; }

 

You can change it to something like this:

 

.section-block--padding {
  padding: 10px 30px; 
}

 

 

guyv
Trailblazer
246 0 67

@alexfc 

 

Thanks for your input. This works, however it changes the padding of all my custom html sections and I only want to change this one section.

 

The section that I want to change is "shopify-section-1641540086e4ae1f73".

 

Please can you assist with code for changing only this one section?

alexfc
Shopify Partner
20 4 3

@guyv 

Sure, you can add an extra style targeted to that specific section:

.section-block--padding {
  padding: 30px; }

#shopify-section-1641540086e4ae1f73 .section-block--padding {
  padding: 10px 30px; 
}

 
Hope this helps.

alexfc
Shopify Partner
20 4 3

@guyv 

 

You can add an extra line to the stylesheet to target that block when it's inside the section you've just mentioned:

From this

.section-block--padding {
  padding: 30px; 
}


To this:

.section-block--padding {
  padding: 30px; 
}

#shopify-section-1641540086e4ae1f73 .section-block--padding {
  padding: 10px 30px; 
}


Hope this helps.

guyv
Trailblazer
246 0 67

@alexfc 

 

Perfect! Thanks a lot for your help!

blakelyhi
Explorer
90 0 4

I am also hoping to adjust the height of a couple of sections on the homepage - I have tried this code targeting the sections and they don't seem to work for me. Any tips? url: https://afca7f-2.myshopify.com/

 

Trying to target the following so that the top and bottom white space matches the border between the images. Same spacing on all sides basically. 

 

Screenshot 2023-11-09 at 7.41.18 AM.pngScreenshot 2023-11-09 at 7.41.27 AM.png

ZestardTech
Shopify Expert
5393 970 1291

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
John-Yixiaobao
Tourist
7 0 5

https://yrhandlock.com/

our url, newly published 

KetanKumar
Shopify Partner
36839 3635 11972

@John-Yixiaobao 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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
alexfc
Shopify Partner
20 4 3

Hi,

LIke the others have said in the forum, it's a bit difficult to diagnose without seeing the website.

Having said that, if you can see the section id for this block, that could be something like this:

<div id="shopify-section-161916007858df887d" class="shopify-section index-section ">

  More HTML code including the button

</div>

 

You could then adjust the padding of the block adding this code to your CSS file (note that in your case the section id will be different)

#shopify-section-161916007858df887d {
  padding-top: 20px;
  padding-bottom: 20px;
}

 

Hope this helps or at least puts you in the right direction.

John-Yixiaobao
Tourist
7 0 5

sorry, my bad, forget to list the url, please help to look

https://yrhandlock.com/

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

Hello There,

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

div#shopify-section-1620876630cd872b4c {
padding-top: 0;
height: auto;
}

div#shopify-section-1620876630cd872b4c center a.btn.hero__btn {
margin-top: 0;
}
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
John-Yixiaobao
Tourist
7 0 5

Solved. Thank you Pallavi