Solved

How to reduce the gap between heading and image

memahmudhassan
Excursionist
26 0 9

For phone version only, on home page featured collection, how to reduce the space between heading and image?

 

Theme: Prestige

Website: https://prettycious.com/

 

Screenshot 2024-05-22 135625.png

MAHAMUD H.
Accepted Solution (1)

Anshul_arora
Navigator
424 121 84

This is an accepted solution.

Hello @memahmudhassan ,

I understand you are looking to reduce the unnecessary space between the heading and the image.

I have reviewed your store and see that on the mobile screen the unnecessary space above and below the heading does not look appropriate.

You can remove the space with the help of the mentioned CSS code.

Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media screen and (max-width: 776px) {
.section-spacing.bordered-section {
margin-block-start: 10px !important;
}
.section-stack {
gap: 0px !important;
}
}

</style>



Output -: https://prnt.sc/w9SlRiYI_JHU

Anshul_arora_0-1716369204264.png

 

I hope the code helps you.

Please share if you need any further assistance.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 9 (9)

ZestardTech
Shopify Expert
5615 1021 1348

Hi @memahmudhassan 

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:
 

 

 

 

@media screen and (max-width: 750px) {
    .section-stack {
	    gap: 1px;
	}
    .section-spacing.bordered-section {
        margin-top: 0;
    }
}

 

 

 

 

ZestardTech_0-1716365595337.png

 

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
memahmudhassan
Excursionist
26 0 9

Not working. Also, I think the total gap is too much.
Screenshot 2024-05-22 151424.png

MAHAMUD H.
ZestardTech
Shopify Expert
5615 1021 1348

Hi @memahmudhassan 

 

Can you please share a screenshot of the file where you added CSS?

 

@media screen and (max-width: 750px) {
.section-stack {
gap: 1px;
}
.section-spacing.bordered-section {
margin-top: 0;
}
}

 

ZestardTech_0-1716370002690.png

 

 

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
memahmudhassan
Excursionist
26 0 9

Did what you toldScreenshot 2024-05-22 155859.png

MAHAMUD H.

techlyser_web
Shopify Partner
1663 304 324

Hello @memahmudhassan 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and(max-width: 767px){
  .h2, :where(.prose h2) {
      font-size: 19px !important;
  }
  .section-stack {
      gap: 0 !important;
  }
}
</style>

techlyser_web_0-1716368826980.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
memahmudhassan
Excursionist
26 0 9

Not working. Also, I think the total gap is too much.

 

Screenshot 2024-05-22 151424.png

MAHAMUD H.
techlyser_web
Shopify Partner
1663 304 324

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and(max-width: 767px){
 .section-spacing.bordered-section {
      margin-top: 10px !important;
  }
  .section-stack {
     gap: 20px !important;
  }
  .section-stack .prose p {
     display: none;
  }
}
</style>

techlyser_web_0-1716370637308.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Anshul_arora
Navigator
424 121 84

This is an accepted solution.

Hello @memahmudhassan ,

I understand you are looking to reduce the unnecessary space between the heading and the image.

I have reviewed your store and see that on the mobile screen the unnecessary space above and below the heading does not look appropriate.

You can remove the space with the help of the mentioned CSS code.

Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

@media screen and (max-width: 776px) {
.section-spacing.bordered-section {
margin-block-start: 10px !important;
}
.section-stack {
gap: 0px !important;
}
}

</style>



Output -: https://prnt.sc/w9SlRiYI_JHU

Anshul_arora_0-1716369204264.png

 

I hope the code helps you.

Please share if you need any further assistance.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
memahmudhassan
Excursionist
26 0 9

Thanks Anshul, it worked!

MAHAMUD H.