Section Margin/Padding - How to adjust on image with text - text section

Store Design
1

Good day,

hoping someone could help me remove or adjust the margin/padding around the text section of the image-with-text section of the site.
URL:
www.reporting.io

I have added the below code for formatting so far in base.css

#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__heading{font-size: 30px; font-weight: bold; margin-bottom: 0px;}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p{    margin: 0;line-height: 1.5;font-size:16px}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p:before { content: "\2714\0020"; color: #ffafcc; font-size: 16px; }
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .button {    min-width: 230px;}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text--caption{font-size: 20px; font-family: Assistant; text-transform:lowercase; margin-top: 0px;}
.image-with-text .image-with-text__text-item.grid__item{display: flex; margin: auto; margin-right:0px; padding-right:0px;
}

and this code in theme.liquid

I’d also like to set different font size and margins for laptop, desktop. The goal is to keep the text on one line regardless of screen size.

Please help!

Thanks

2

Update: sorted the padding. All i would like to know now is how to set different css for each device

This was for the padding, added to base.css

#ImageWithText--template--15930392838365__1654184156c0fcfe33 {padding-right:0px; padding-left:5px;}
3

Figured it out, the @media screen is what defines what shows on different dimension screens.

@media screen and (max-width: 749px) {
 #ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__heading{font-size: 25px; font-weight: bold; margin-bottom: 0px;}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p{    margin: 0;line-height: 1.5;font-size:14px}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p:before { content: "\2714\0020"; color: #ffafcc; font-size: 16px; }
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .button {    min-width: 230px;margin:auto; width:50%;margin-top:35px}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text--caption{font-size: 18px; font-family: Assistant; text-transform:lowercase; margin-top: 0px;}
.image-with-text .image-with-text__text-item.grid__item{display: flex; margin: auto; margin-right:0px; padding-right:0px;
}