Resize image & banner for mobile only

On 11/5/2020 at 2:40 AM, toniohb said:

Site URL: https://bad-obsession.com

Hi @tuanphan

I hope you're doing alright 

I have gone through your coding advice to other people in this thread and tried to insert custom CSS on my site www.bad-obsession.com (code: bibi007) so that the height of the homepage banner image (with the guy and the girl) on mobile devices is different from the height on desktop.

For your information I'm in the middle of my 14 days trial period.

Here is the code I tried to insert and did not work :

@media screen and (max-width:640px) {

[data-parallax-id="5f852269ae879c7bde5e19a2"] .section-background img {

    height: 40vh;

}

}

Thank you in advance for your kind help

toniohb

Remove above code, then add this to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:640px) {
section#home figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#home {
    min-height: 165px !important;
}
}

@tuanphan

Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. 

my website is www.roughandrose.co and its the "spotlight-post" section as pictured below.

Thanks in advance! 

Julia

Thank you very much for your kind help @tuanphan ! 

Take care 

On 11/8/2020 at 10:53 AM, juliahodgins said:

@tuanphan

Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. 

my website is www.roughandrose.co and its the "spotlight-post" section as pictured below.

Thanks in advance! 

Julia

 

@tuanphan Hi Tuan was wondering if you are able to help with this? Much appreciated.

54 minutes ago, juliahodgins said:

@tuanphan Hi Tuan was wondering if you are able to help with this? Much appreciated.

You can add 2 sections: I can give the code to hide 1 on desktop, hide 1 on mobile

6 minutes ago, tuanphan said:

You can add 2 sections: I can give the code to hide 1 on desktop, hide 1 on mobile

@tuanphan 

so duplicate the section and add unique CSS code to each section? 

yes please, if you can prepare the code that would be amazing thank you!

4 hours ago, juliahodgins said:

@tuanphan 

so duplicate the section and add unique CSS code to each section? 

yes please, if you can prepare the code that would be amazing thank you!

You can sections first, I can't give code without checking section.

6 hours ago, tuanphan said:

You can sections first, I can't give code without checking section.

Thanks @tuanphan I've duplicated now 🙂

1 hour ago, juliahodgins said:

Thanks @tuanphan I've duplicated now 🙂

top banner for mobile or desktop?

3 hours ago, tuanphan said:

top banner for mobile or desktop?

top banner for desktop and bottom banner for mobile, thank you!

28 minutes ago, juliahodgins said:

top banner for desktop and bottom banner for mobile, thank you!

Add to Home > Design > Custom CSS

/* Hide bottom banner on desktop */
@media screen and (min-width:641px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:640px) {
section#spotlight-post {
display: none;
}
}

14 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Hide bottom banner on desktop */
@media screen and (min-width:641px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:640px) {
section#spotlight-post {
display: none;
}
}

 

are you able to kindly include a coding for  the bottom banner to show on tablet as well? 

THANK YOU! YOU ARE AMAZING! 

20 minutes ago, juliahodgins said:

are you able to kindly include a coding for  the bottom banner to show on tablet as well? 

THANK YOU! YOU ARE AMAZING! 

min-width: 641px = desktop + tablet

31 minutes ago, tuanphan said:

min-width: 641px = desktop + tablet

where do I out that in the code? 

On 11/10/2020 at 11:03 AM, juliahodgins said:

where do I out that in the code? 

Try this

/* Hide bottom banner on desktop */
@media screen and (min-width:901px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:900px) {
section#spotlight-post {
display: none;
}
}

On 11/11/2020 at 9:58 PM, tuanphan said:

Try this

/* Hide bottom banner on desktop */
@media screen and (min-width:901px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:900px) {
section#spotlight-post {
display: none;
}
}

 

you are amazing, thank you so very much!

On 11/13/2020 at 10:04 AM, juliahodgins said:

you are amazing, thank you so very much!

Hi. I see on tablet Buttons: More Info, Learn More not align.

Do you want to fix this?

@tuanphan

Also trying to reside my banner images in mobile view. I've been using the following that worked great prior to me changing the images. Might you be able to help me identify why it's not working now that the images are different?

/*RESIZING BANNERS ON MOBILE IN SQUARESPACE - BRINE W/ PARALLAX*/
/*image 1*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(1) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3bcde5597268282ecb75/1626291160358/shutterstock_1903979449.jpg');
    background-position: 45% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(1) .Index-page-image img {
    display: none;
    }
}
/*image 2*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(2) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3bf3498183082da0f405/1626291201103/shutterstock_1623765805.jpg');
    background-position: 50% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(2) .Index-page-image img {
    display: none;
  }
}
/*image 3*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(3) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3c0e0f253f0745d394b3/1626291218552/341.jpg');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(3) .Index-page-image img {
    display: none;
  }
}

20 minutes ago, SouthernSunEvents said:

@tuanphan

Also trying to reside my banner images in mobile view. I've been using the following that worked great prior to me changing the images. Might you be able to help me identify why it's not working now that the images are different?

 

/*RESIZING BANNERS ON MOBILE IN SQUARESPACE - BRINE W/ PARALLAX*/
/*image 1*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(1) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3bcde5597268282ecb75/1626291160358/shutterstock_1903979449.jpg');
    background-position: 45% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(1) .Index-page-image img {
    display: none;
    }
}
/*image 2*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(2) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3bf3498183082da0f405/1626291201103/shutterstock_1623765805.jpg');
    background-position: 50% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(2) .Index-page-image img {
    display: none;
  }
}
/*image 3*/
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(3) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/60ef3c0e0f253f0745d394b3/1626291218552/341.jpg');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(3) .Index-page-image img {
    display: none;
  }
}

@tuanphan I think I just solved this but I had to add this code on top of what's listed above. It feels like a huge amount of code for this. Do you think it looks alright? Everything seems to work with this except for the intro banner image on tablet view. Not sure how I can fix that one. Thanks so much for your help on everything. You must be so sick of looking at my page!!

/* RESIZING BANNERS - IMAGE 1*/
@media screen and (max-width:640px) {
section#about-intro figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#about-intro {
    min-height: unset !important;
    height: 80vh !important;
}
}
/* RESIZING BANNERS - IMAGE 2*/
@media screen and (max-width:640px) {
section#explore-our-work figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#explore-our-work {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 3*/
@media screen and (max-width:640px) {
section#quote figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#quote {
    min-height: unset !important;
    height: 80vh !important;
}
}

On 7/15/2021 at 3:01 AM, SouthernSunEvents said:

@tuanphan I think I just solved this but I had to add this code on top of what's listed above. It feels like a huge amount of code for this. Do you think it looks alright? Everything seems to work with this except for the intro banner image on tablet view. Not sure how I can fix that one. Thanks so much for your help on everything. You must be so sick of looking at my page!!

 

/* RESIZING BANNERS - IMAGE 1*/
@media screen and (max-width:640px) {
section#about-intro figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#about-intro {
    min-height: unset !important;
    height: 80vh !important;
}
}
/* RESIZING BANNERS - IMAGE 2*/
@media screen and (max-width:640px) {
section#explore-our-work figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#explore-our-work {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 3*/
@media screen and (max-width:640px) {
section#quote figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#quote {
    min-height: unset !important;
    height: 80vh !important;
}
}

Hi. Can you share link to page where you want to resize image?

9 hours ago, tuanphan said:

Hi. Can you share link to page where you want to resize image?

gah, so sorry! 

http://www.southernsunevents.com

PW: sse2020

On 7/16/2021 at 10:54 PM, SouthernSunEvents said:

gah, so sorry! 

http://www.southernsunevents.com

PW: sse2020

Hi. The site looks good here. Can you describe again your problem? Thank you.

Hello, 

I am also trying to resize my mobile banner and banner slideshow but none of these codes seem to fitting my liking. 

@tuanphan do you have any ideas as to how i can resize the below to fit my mobile screen?

https://raspberry-coyote-6gss.squarespace.com

I wrote this code to reduce image size on desktop and mobile and also add a 50% radius but I'm wondering if anyone would know how to simplify it?

Thank you 🙂

/* Round steps */

section[data-section-id="6061b72dea4a502092254ecd"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="6061b72dea4a502092254ecd"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

section[data-section-id="6061b2a5ea4a50209225138d"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="6061b2a5ea4a50209225138d"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

section[data-section-id="612ef07b81c66936ee07da7c"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="612ef07b81c66936ee07da7c"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

On 10/1/2021 at 1:29 PM, Jeremyn said:

I wrote this code to reduce image size on desktop and mobile and also add a 50% radius but I'm wondering if anyone would know how to simplify it?

 

Thank you 🙂

 

 

/* Round steps */

section[data-section-id="6061b72dea4a502092254ecd"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="6061b72dea4a502092254ecd"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

section[data-section-id="6061b2a5ea4a50209225138d"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="6061b2a5ea4a50209225138d"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

section[data-section-id="612ef07b81c66936ee07da7c"]
.sqs-block-image img{ border-radius: 50%; }

section[data-section-id="612ef07b81c66936ee07da7c"]
.image-block-wrapper {
    max-width: 60%;
    margin: 0 auto;
}

It 

On 9/30/2021 at 5:06 PM, Nipper said:

Hello, 

I am also trying to resize my mobile banner and banner slideshow but none of these codes seem to fitting my liking. 

@tuanphan do you have any ideas as to how i can resize the below to fit my mobile screen?

https://raspberry-coyote-6gss.squarespace.com

 

It looks like you fixed this?