Jump to content

Custom CSS not changing the site at all.

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

image.thumb.png.68fdeaeeaf08f7d869719378f0827b20.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
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;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.