Coding for mobile version of website

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!

Hi,

Add to Design > Custom CSS

/* Resize mobile home slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 25vh !important;
}
}

On 4/2/2022 at 5:38 AM, tuanphan said:

Hi,

Add to Design > Custom CSS

/* Resize mobile home slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 25vh !important;
}
}

This worked!! Thank you so much!

 

@tuanphan

Can this be done to with a video file? 

https://www.portanova.pt/

Thank you

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