Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Resize image & banner for mobile only


NorthernGoose

Question

Recommended Posts

  • 0
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

 

Screen Shot 2020-11-08 at 10.52.19 AM.png

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

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

Link to comment
  • 0
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.

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

 

Link to comment
  • 0
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! 

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

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

 

Link to comment
  • 0
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!

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

image.thumb.png.a3f588749ec4f6aefaf9caa25ac6829d.png

 

Link to comment
  • 0

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

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

Edited by SouthernSunEvents
Link to comment
  • 0
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?

Link to comment
  • 0
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.

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...