How can I adjust spacing in the about and icons section?

Store Design
1

Hi everyone,

I need a little bit of help with my ABOUT AND ICONS section on my product page for both mobile/desktop view.

I am having some spacing issues that I would like to solve.

My issues are below.

1. How do I add 50px padding to the top of the About and icons section.

2. How do I add 30px gap between each of the 3 icons and text so they are evenly spaced out.

I have tried to add my own code to the theme.scss.liquid section but either nothing happens or my whole site scrambles.

I have attached a screen shot from the mobile version of my store below to show what I need help with. My url is also below.

https://ylb9x18jn9ztpjft-54993551588.shopifypreview.com

THANK YOU kindly.

Screen Shot 2022-07-16 at 7.54.37 pm.png
Screen Shot 2022-07-16 at 7.54.37 pm.png1336×1798 205 KB

2

Hi @Timstar ,

Try this CSS

@media screen and (max-width: 500px)
.about-and-icons-column {
width: 100%;
/* padding-top: 0px; */
padding-bottom: 30px;
max-height: unset;
}

3

This did not seem to work.

I entered your code at the bottom of my theme.scss.liquid this happened.

Screen Shot 2022-07-17 at 2.47.16 pm.png
Screen Shot 2022-07-17 at 2.47.16 pm.png3456×2234 649 KB

4

@Timstar

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 500px) {
.about-and-icons-column:first-child {
    padding-top: 50px;
}
.about-and-icons-column {
max-height: 100%;
}
}
5

I will try this now. Thank you.

6

The padding at the top is great but i think you forgot to space out each of the 3 sections.

Can you please give me the code to add 30px of space between each of the 3 section.

Please see mobile screen shot below.

Screen Shot 2022-07-17 at 3.40.57 pm.png
Screen Shot 2022-07-17 at 3.40.57 pm.png754×1480 135 KB

7

@KetanKumar

There was a slight error please see screenshot from mobile above.

Thank you.

8

@Timstar

@media screen and (max-width: 500px) {
.about-and-icons-column {
width: 100%;
/* padding-top: 0px; */
padding-bottom: 30px;
max-height: unset;
} 
}

I hope this should work now

9

@Timstar

yes, please add this code also

@media screen and (max-width: 500px) {
.about-and-icons-column {
max-height: 100%;
}
}
10

Its looking a little better but The 50px padding at the top has disappeared. Can you please add this back in and also I would like more gap in between each section. Thank you.

Screen Shot 2022-07-18 at 4.28.37 pm.png
Screen Shot 2022-07-18 at 4.28.37 pm.png1030×1498 148 KB

11

Hi there, I tried your code and nothing happened.

Thank you for your help though :slightly_smiling_face:

12

@Timstar

sorry i can’t see code

13

@KetanKumar are you able to help me with the spacing?

I just need 50px on top and some more space in between the 3 sections.