Jump to content

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

Recommended Posts

Posted (edited)

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?

 

Edited by CAIAC_NC
  • Replies 2
  • Views 318
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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!!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.