Scale Mobile Banner With CSS

Site URL: https://koi-pufferfish-mn7c.squarespace.com/

Hi There,

I'm trying to figure out how to scale all the main banner images on the site. The code below worked on the home page but I don't know how to make it work on the other pages.

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}

I'm open to any new ideas. Below is the site info:

https://koi-pufferfish-mn7c.squarespace.com/
pass: surf

Thank you.

Repeat above code. Replace this

Quote

body.homepage #page section:first-child

with data section id.

use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! I tried this code for the Charters page but it doesn't seem to be working...

@media screen and (max-width:767px) {
#block-249651d18bb132d522b0 {
    min-height: 20vh;
    margin-top: 10vh;
}
}

What have I done wrong?

Thanks again!

On 5/10/2021 at 7:11 PM, Shortline said:

Thank you! I tried this code for the Charters page but it doesn't seem to be working...

@media screen and (max-width:767px) {
#block-249651d18bb132d522b0 {
    min-height: 20vh;
    margin-top: 10vh;
}
}

What have I done wrong?

Thanks again!

Hi. Find data-section-id, not block-id. You are using block id.

Sorry...I must be doing something wrong. Here's what I have now:

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
6096a6121354e120a42ddc08 {
    min-height: 20vh;
    margin-top: 10vh;
}
}

The https://koi-pufferfish-mn7c.squarespace.com/faqs is section 6096a6121354e120a42ddc08

I'm not sure what i've done wrong.

Thanks

14 hours ago, Shortline said:

Sorry...I must be doing something wrong. Here's what I have now:

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
6096a6121354e120a42ddc08 {
    min-height: 20vh;
    margin-top: 10vh;
}
}

The https://koi-pufferfish-mn7c.squarespace.com/faqs is section 6096a6121354e120a42ddc08

I'm not sure what i've done wrong.

Thanks

Use this

Quote

[data-section-id="6096a6121354e120a42ddc08"]

Thank you. Now I'm getting a Syntax Error on line 8

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
[data-section id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

What did I do wrong this time? 

Thank you

19 hours ago, Shortline said:

Thank you. Now I'm getting a Syntax Error on line 8

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
[data-section id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

What did I do wrong this time? 

Thank you

Can you send all code in Custom CSS?

This is all I have for CSS

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
[data-section id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

Thank you.

23 hours ago, Shortline said:

This is all I have for CSS

@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
}
@media screen and (max-width:767px) {
[data-section id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

 

Thank you.

Remove all, use this

@media screen and (max-width:767px) {
[data-section id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

no luck. I'm getting a syntax error on line 2. check out the attached image.

thank you

ah, missing "-" symbol, use this

@media screen and (max-width:767px) {
[data-section-id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

No luck. I've added the code but the image does not scale. The only CSS I have right now is:

@media screen and (max-width:767px) {
[data-section-id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

https://koi-pufferfish-mn7c.squarespace.com/
pass: surf

Thank you

Use this new code

@media screen and (max-width: 767px) {
    body.homepage article section:first-child {
        min-height: unset !important;
        margin-top: 10vh;
    }
}

The home page not scales properly but not the other pages. Here's the CCS code right now:

@media screen and (max-width: 767px) {
    body.homepage article section:first-child {
        min-height: unset !important;
        margin-top: 10vh;
    }
}
@media screen and (max-width:767px) {
[data-section-id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

I've also tried only this CSS:

@media screen and (max-width: 767px) {
    body.homepage article section:first-child {
        min-height: unset !important;
        margin-top: 10vh;
    }
}

Neither seems to work.

Thanks

On 5/29/2021 at 12:34 AM, Shortline said:

The home page not scales properly but not the other pages. Here's the CCS code right now:

@media screen and (max-width: 767px) {
    body.homepage article section:first-child {
        min-height: unset !important;
        margin-top: 10vh;
    }
}
@media screen and (max-width:767px) {
[data-section-id="6096a6121354e120a42ddc08"] {
    min-height: 20vh;
    margin-top: 10vh;
}
}

 

I've also tried only this CSS:

@media screen and (max-width: 767px) {
    body.homepage article section:first-child {
        min-height: unset !important;
        margin-top: 10vh;
    }
}

Neither seems to work.

Thanks

I see it worked here?

The home page works but I'd like to have all the other pages do the same thing.

Thank you.

On 5/31/2021 at 6:57 PM, Shortline said:

The home page works but I'd like to have all the other pages do the same thing.

Thank you.

Each page needs a different code. Can you share link to all pages?

Makes sense. Here are the pages

https://www.surfgranbury.com/charters

https://www.surfgranbury.com/faqs

https://www.surfgranbury.com/covid

https://www.surfgranbury.com/contact

https://www.surfgranbury.com/online-booking

Thank you.

Add to Design > Custom CSS

/* Mobile-Banner */
@media screen and (max-width:767px) {
/* Charters */
[data-section-id="609685032896e65339e3a8e2"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 5vh;
}
/* faqs */
[data-section-id="6096a6121354e120a42ddc08"] {
    min-height: unset !important;
}
/* covid */
[data-section-id="6096a6f57dc7db684ff74aef"] {
    min-height: unset !important;
    height: 35vh;
}
/* contact */
[data-section-id="6096aa30cc694952d8338089"] {
    min-height: unset !important;
    height: 35vh;
    margin-top: 5vh;
}

}

AWESOME! All the banners look perfect.

Thanks for taking the time to help me.

Much appreciated.

On 6/3/2021 at 7:29 PM, Shortline said:

AWESOME! All the banners look perfect.

Thanks for taking the time to help me.

Much appreciated.

Do you need support with these?

Site URL – https://koi-pufferfish-mn7c.squarespace.com/

1. (Mobile-Footer) Reduce logo size?

2. (Tablet-Homepage) Resize image?

3. (Overlay Menu) Change logo color?

4. (Tablet-FAQs) Increase content width?