How to reduce the gap between heading and image

[memahmudhassan]

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

Theme: Prestige

Website: https://prettycious.com/

[ZestardTech]

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;
    }
}

[memahmudhassan]

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

[ZestardTech]

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;
}
}

[memahmudhassan]

Did what you told

[niraj_patel]

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>

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

[memahmudhassan]

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

[niraj_patel]

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>

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

[Anshul_arora · 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

I hope the code helps you.

Please share if you need any further assistance.

Thank you.

[memahmudhassan]

Thanks Anshul, it worked!