Custom CSS not changing the site at all.

Site URL: https://flounder-endive-g7et.squarespace.com/

Hey guys I am new to the site and not a coder at all, thats way I went with squarespace.

That said I am having a great deal of problems with the responsiveness of the site, in the home page I have a videos as the main heater when in mobile it was cropped at the sides so I had to create a very bad version of it as a gif because the template only accepts 20mb, not ideal. Also in the home page I have a galera and an Image (awards) that wont resize when in mobile. Every CSS that I came across in forum and etc wont change anything when pasted in the custom CSS area.

Can someone help me here. I just want my mains header video, img gallery and img(awards) to responde to mobile.

Thanks!

1 hour ago, danielkalves said:

Site URL: https://flounder-endive-g7et.squarespace.com/

Hey guys I am new to the site and not a coder at all, thats way I went with squarespace.

That said I am having a great deal of problems with the responsiveness of the site, in the home page I have a videos as the main heater when in mobile it was cropped at the sides so I had to create a very bad version of it as a gif because the template only accepts 20mb, not ideal. Also in the home page I have a galera and an Image (awards) that wont resize when in mobile. Every CSS that I came across in forum and etc wont change anything when pasted in the custom CSS area.

Can someone help me here. I just want my mains header video, img gallery and img(awards) to responde to mobile.

Thanks!

Can you share your protected password?

How do I do that safely? Thanks!

3 hours ago, danielkalves said:

How do I do that safely?

Sharing a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Awesome thanks guys. The password is: 123456

12 hours ago, danielkalves said:

Awesome thanks guys. The password is: 123456

Add to Design > Custom CSS

/* Resize mobile video-image */
@media screen and (max-width:767px) {
[data-section-id="6115bd2deef6b019cf5b09b0"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="6115bd2deef6b019cf5b09b0"] {
    min-height: unset !important;
    height: 35vh !important;
    margin-top: 10vh;
}

[data-section-id="611eb62de612146b6d188c3e"] {
    min-height: unset !important;
    height: 10vh;
}
}

On 10/5/2021 at 3:02 AM, tuanphan said:

Add to Design > Custom CSS

/* Resize mobile video-image */
@media screen and (max-width:767px) {
[data-section-id="6115bd2deef6b019cf5b09b0"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="6115bd2deef6b019cf5b09b0"] {
    min-height: unset !important;
    height: 35vh !important;
    margin-top: 10vh;
}

[data-section-id="611eb62de612146b6d188c3e"] {
    min-height: unset !important;
    height: 10vh;
}
}

 

This is amazing man! You solved 70% of the problems with that code but the gallery imgs (yellow with 3 movies slots side by side) is not resizing. Can you help me with that also? Thanks a lot guys

On 10/5/2021 at 2:50 AM, danielkalves said:

Awesome thanks guys. The password is: 123456

Can you check password again? It seems incorrect

On 10/1/2021 at 6:38 PM, bangank36 said:

Can you share your protected password?

I'ts working here please try it again. Thanks

Hey guys any chance you have sometime to check that "img gallery" mobile responsiveness issue?

Thanks 

7 hours ago, danielkalves said:

Hey guys any chance you have sometime to check that "img gallery" mobile responsiveness issue?

Thanks 

You mean resize these images?

Yes, its cropping the sides of it.

On 10/21/2021 at 12:36 AM, danielkalves said:

Yes, its cropping the sides of it.

Add to Design > Custom CSS > Then save & reload the site

/* Resize slideshow mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 35vh !important;
}
}

Thanks for all the help!