Jump to content

CAIAC_NC

Member
  • Posts

    2
  • Joined

  • Last visited

CAIAC_NC's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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?
×
×
  • 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.