Jump to content

Coding for mobile version of website

Recommended Posts

Site URL: https://parrot-octahedron-wlc9.squarespace.com/config/

I have created my website exactly how I want it on the desktop version. However, the cover photo "Called & Chosen Christian Apparel" does not fit the mobile version how I want it to. The cropping on the mobile version cuts out the words so they cannot be read. I want to be able to read the entirety of the photos that slide at the top of the page when on mobile version. I have read that I need to code something, but I don't know how to do that. Thanks in advance!

Screenshot (191).png

Screenshot (192).png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 1 month later...
On 6/4/2022 at 7:07 AM, VPerfeito said:

@tuanphan

Can this be done to with a video file? 

https://www.portanova.pt/

Thank you

Use this CSS

@media screen and (max-width:767px) {
[data-section-id="6251f2d8a7b6271ae9b6d286"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="6251f2d8a7b6271ae9b6d286"] {
    min-height: unset !important;
    height: 25vh;
}
}

 

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

Link to comment

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.