Help with Mobile Only Editing

Hi all, I could use a bit of help with some mobile editing. I know just enough CSS to be dangerous. I can figure out the right code to use, but can't figure out which sections to call out on the Spuarespace site I'm working on. I'd like these icons (that are uploaded as PNGs to be more proportionately sized on mobile. The text is also a bit small. I like the way it looks on desktop, but mobile gets weird and I can't figure out a way to edit the two individually. Any help would be greatly appreciated.

Here's the link to one of the pages. However, this element is on each of the pages underneath the Services dropdown. If it's a different call out for each page, please advise.

https://www.abbsolutelyorganized.com/bathrooms-closets 

Thank you so much!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-63bdac74493f6a3a593a8132 .image-block {
    width: 50%;
    margin: 0 auto;
}
}

On 1/26/2023 at 7:44 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-63bdac74493f6a3a593a8132 .image-block {
    width: 50%;
    margin: 0 auto;
}
}

 

That's beautiful! Thank you so much! With that I'm able to identify which section to call out on the other pages. My only other question is, do you know how I can increase the size of the text a little on those sections. I'd like it to be 1.5x to 2x larger than it is now. 

On 2/8/2023 at 3:30 AM, nikkig127 said:

That's beautiful! Thank you so much! With that I'm able to identify which section to call out on the other pages. My only other question is, do you know how I can increase the size of the text a little on those sections. I'd like it to be 1.5x to 2x larger than it is now. 

Use this new code

@media screen and (max-width:767px) {
div#page-section-63bdac74493f6a3a593a8132 .image-block {
    width: 50%;
    margin: 0 auto;
}
div#page-section-63bdac74493f6a3a593a8132 * {
	font-size: 28px !important;
}
}