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

Banner Image Won't Resize for Mobile View

Recommended Posts

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>

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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

Share this post


Link to post
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.

Share this post


Link to post
Posted (edited)

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

Edited by Melissa_FL

Share this post


Link to post
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:

Which image? Homepage or..?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
Posted (edited)

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. 

1745566990_ScreenShot2020-05-14at14_56_09.thumb.png.f709acb14901d3a299233f1970e4a00f.png

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

image.thumb.png.cb712c4698adae99de124f100ccd9d4e.png

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

https://www.technologydeskingtradingdesks.com/

Edited by KrisJWhite
Insert Hyperlink

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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!

Share this post


Link to post
Posted (edited)

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! 

Edited by KreativMS

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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 :)

Screen Shot 2020-05-26 at 1.06.39 pm.png

Screen Shot 2020-05-26 at 1.06.25 pm.png

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...