Why is my icon margin adjustment not working on mobile version?

Store Design
1

Hi everyone,

I was hoping someone could help me with a margin problem.

On my landing page I have a rich text section with an About and icons section underneath (see images below).

I am trying to move the About and icons section closer to the rich text section above. I have been successful with the desktop version but nothing has changed on the mobile version. Can someone please let me know why its working on desktop but not mobile please. i have attached the code below. The code for the desktop is on line 9961 and the mobile version is 9963.

My preview link is below. (This link express after 2 days).
https://ektxwlfh6slpgdbz-54993551588.shopifypreview.com

Code on line 9961 is correct and has moved my About and icons section up towards the rich text section above.
Code on line 9961 is correct and has moved my About and icons section up towards the rich text section above.3436×1850 499 KB

Code on line 9963 currently does not work on mobile. It is supposed to move the About and icons sections up towards the rich text section above
Code on line 9963 currently does not work on mobile. It is supposed to move the About and icons sections up towards the rich text section above3448×1980 810 KB

Code for the About and icons section is on line 9961 and 9963
Code for the About and icons section is on line 9961 and 99631714×934 185 KB

2

@Timstar - I checked, it is working fine, you can adjust -30 as per your need

3

Hello @Renaye

“display:grid” not support negative margin

GemPages_0-1670404528566.png
GemPages_0-1670404528566.png1392×869 113 KB

You can add this custom code to line 9665 in theme.scss.liquid

#shopify-section-template--16533096136932__166086832312f9267f .about-and-icons-container {
    display: inline-grid !important;
}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

@Timstar

Try add this code to theme.scss.liquid file

@media screen and (max-width: 750px) {
	.about-and-icons-container {
		display: inline-grid !important;
	}
}

Try it and let me know

5

Thank you for your time.

6

I am glad that my recommendation is helpful to you :grin: .