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

[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 on theme.liquid

@media screen and(max-width: 767px){ .h2, :where(.prose h2) { font-size: 19px !important; } .section-stack { gap: 0 !important; } }

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

[Anshul_arora]

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 tag and save.

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

I hope the code helps you.

Please share if you need any further assistance.

Thank you.

[memahmudhassan]

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

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

[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 on theme.liquid

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

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

[memahmudhassan]

Did what you told

[memahmudhassan]

Thanks Anshul, it worked!