Banner Image Won't Resize for Mobile View

9 hours ago, RAD_Design said:

Hi guys, having a similar issue here as the other posters... All banners are scaling properly on my site in mobile, except for one! 

I've read through a million articles and posts on here, played with code and am still having trouble. Would anyone be able to have a look for me and see where I'm going wrong!? I just don't have the tech abilities to understand it.

URLs is: https://gopher-mackerel-pen5.squarespace.com/contact
PW: HIP2020!

There is a lot of code in the Custom CSS panel from previous designer building it, not mine btw. 

Thanks in advance!

Jay.

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

Hi everyone, 

I'm having a similar issue, but the rotating banner image on main page is covering up some of the text on mobile.  I see the codes given, but where exactly do I insert that into the CSS?  Or is that being generated for each individual site? 

Any help is appreciated.  Our President just brought this to my attention.  

www.AltClaim.com

11 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

 

Amazing, thankyou @tuanphan for your help! Sorted.

RAD.

Unfortunately, that didn't work for me, it made the image small in the center on desktop and no change on mobile.

• Hi! HAving the same problem
  
  Link URL: https://www.ahoratecuidoyo.org/

On 4/22/2020 at 6:06 AM, Melissa_FL said:

Hi everyone, 

I'm having a similar issue, but the rotating banner image on main page is covering up some of the text on mobile.  I see the codes given, but where exactly do I insert that into the CSS?  Or is that being generated for each individual site? 

Any help is appreciated.  Our President just brought this to my attention.  

www.AltClaim.com

Have you solved yet?

On 4/28/2020 at 5:42 AM, Ahora said:

• Hi! HAving the same problem
  
  Link URL: https://www.ahoratecuidoyo.org/

Which image? Homepage or..?

Hi @tuanphan I'm having a similar issue to those above, where I want my banner image to crop for mobile on both the home page and each of the 'Product' pages. 

 The banner looks fine on the desktop with the whole image, but doesn't adapt to mobile:

Is this something that can be fixed, and on our multiple product pages? Thanks in advance!

https://www.technologydeskingtradingdesks.com/

12 hours ago, KrisJWhite said:

Hi @tuanphan I'm having a similar issue to those above, where I want my banner image to crop for mobile on both the home page and each of the 'P

 

Is this something that can be fixed, and on our multiple product pages? Thanks in advance!

https://www.technologydeskingtradingdesks.com/

Add to Home > Design > Cusotm CSS

@media screen and (max-width:640px) {
.homepage {
  .Parallax-item img {
      width: 100% !important;
      left: 0 !important;
      height: auto !important;
      top: 0 !important;
  }			
	section#intro-image {
   	 height: 200px;
	}
  div#page-5bfe89c2032be4ebc6075bef .spacer-block {
      display: none;
  }
}
}

Thanks for that @tuanphan, the homepage looks great!

If I wanted to use this across all of my product page banners throughout the site, would it be best to copy this formula and adapt to each page, or is there a way to apply this it to every page more easily?

Thanks!

Hi @tuanphan I just stumbled on this today been trying to also fix this problem on my website. I was hoping if you could also please help me out on this as well. The homepage banner will not change resolution when I change it to mobile view. 

My website is kreativms.com https://www.kreativms.com/

Thank you! 

12 hours ago, KreativMS said:

Hi @tuanphan I just stumbled on this today been trying to also fix this problem on my website. I was hoping if you could also please help me out on this as well. The homepage banner will not change resolution when I change it to mobile view. 

My website is kreativms.com https://www.kreativms.com/

Thank you! 

Add to Home > Design > Custom CSS

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

I am also having an issue getting my sliding image gallery to resize properly on mobile. I tried the first CSS code but pretty sure that is specifically for background images. What would I tweak to fix mine? 

The website is www.Vincereteam.com

Looking for the same solution. Index banner image on homepage does not resize for mobile. Any help is appreciated.

Link to the page 

https://www.foragedsounds.com

Thanks in advance!

9 hours ago, igotbadnewz said:

Looking for the same solution. Index banner image on homepage does not resize for mobile. Any help is appreciated.

Link to the page 

https://www.foragedsounds.com

Thanks in advance!

For future members

Add to Home > design > Custom CSS

@media screen and (max-width:640px) {
.homepage section#landing {
    height: 250px;
}
#landing img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

Hi There,

I have tried about 5 CSS codes and none of them have worked. I am trying to use a slider for banner on the bedford template 7.0. 

The desktop view is great but the mobile is terrible. www.ahampremayoga.co

Any help would be so greatly appreciated! Thankyou :)

are those having this similar problem because of the native template that stretches the first picture?

On 5/26/2020 at 3:07 PM, chambcou said:

Hi There,

I have tried about 5 CSS codes and none of them have worked. I am trying to use a slider for banner on the bedford template 7.0. 

The desktop view is great but the mobile is terrible. www.ahampremayoga.co

Any help would be so greatly appreciated! Thankyou :)

 

Can you share link to page in screenshot?

19 hours ago, womanatcana said:

are those having this similar problem because of the native template that stretches the first picture?

Can you share link to page in your question?

Hi friends,

I am also having difficulties with this, my banner image is not properly resizing for mobile.

moderncourage.com

Warm regards,

Jess

4 hours ago, JessicaRita said:

Hi friends,

I am also having difficulties with this, my banner image is not properly resizing for mobile.

moderncourage.com

Warm regards,

 

Jess

Which image? Can you take a screenshot?

Hi Tuanpan,

It's happening on two pages, my initial cover (enter) page, as well as my /home page. I've included both screenshots and what they look like on mobile.

17 hours ago, JessicaRita said:

Hi Tuanpan,

It's happening on two pages, my initial cover (enter) page, as well as my /home page. I've included both screenshots and what they look like on mobile.

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
section#jessicarita figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#jessicarita {
    min-height: 30vh !important;
}
}

On 5/29/2020 at 10:39 PM, tuanphan said:

Which image? Can you take a screenshot?

7 hours ago, tuanphan said:

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
section#jessicarita figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#jessicarita {
    min-height: 30vh !important;
}
}

 

Hi there,

Thank you so much for this! It only seems to work on my /home page, and not my initial cover page located at www.moderncourage.com

Any thoughts?

-Jessica

Hi All,

Having the same issue with the mobile view.

 I have also placed the tool bar inside the mirror of the background image which I would like to keep static but it seems to move when on a different size screen - how do I stop this from happening ? pls help!

https://www.lellasoper.com

On 5/31/2020 at 10:19 PM, JessicaRita said:

 

 

With cover page, use

@media screen and (max-width:767px) {
body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image {
    min-height: 30vh !important;
}
}

On 6/1/2020 at 10:46 PM, Lsoper said:

Hi All,

Having the same issue with the mobile view.

 I have also placed the tool bar inside the mirror of the background image which I would like to keep static but it seems to move when on a different size screen - how do I stop this from happening ? pls help!

https://www.lellasoper.com

@media screen and (max-width:767px) {
.homepage section:first-child {
    min-height: 30vh !important;
}
}