Help with getting a page to look right for both mobile + desktop users

Site URL: https://www.caiac4kids.org/

Cheers and thank you for any help provided...I'm new at this!

I'm trying to create a page that looks consistent + effective in both desktop and mobile.  As you can see on my landing page (Child Advocates of Iredell and Alexander Counties (caiac4kids.org) I've got an image that looks great on desktop but when going mobile, the default squarespace site template made sure the image was way too large.  I have tried to inject the following custom css to display one section for desktop use and another section for mobile use in order to properly size the image for the mobile user:

@media only screen and(min-width:641px) {section[data-section-id="mobile id"]{display:none}}

@media only screen and (max-width:640px) {section[data-section-id="desktop id"]{display:none}}

As you all can see, the CSS works but now the mobile section is bleeding way up into the header...which I definitely do not want.

So my three questions are - am I even doing this the right way?  If so, any tips on how to pull that section for the mobile view down and outside of the way of the header?  If not, any good tips on how to best achieve a page that is consistent + effective in both desktop and mobile?

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Fix mobile section */
@media screen and (max-width:767px) {
[data-section-id="6263d43fb73adb295985aee2"] {
    margin-top: 100px;
    min-height: unset !important;
    height: 20vh;
}}

1 hour ago, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Fix mobile section */
@media screen and (max-width:767px) {
[data-section-id="6263d43fb73adb295985aee2"] {
    margin-top: 100px;
    min-height: unset !important;
    height: 20vh;
}}

 

Beautiful!!!  Thank you so much @tuanphan!!