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

Banner Image Won't Resize for Mobile View


TheIDBootCamp
Go to solution Solved by tuanphan,

Question

Hello, 

Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image.

Thanks in advance.

IMG_5025.PNG

Screen Shot 2019-12-13 at 11.16.48 AM.png

Link to post
  • Answers 294
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@media screen and (max-width:640px) { [data-section-id="5e5d461757cae6512002d1c0"] .section-background img { width: 100% !important; height: auto !important; } }  

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e5c9aff118337590dcf052e"] { min-height: 40vh !important; } }  

Remove your code & use this code @media screen and (max-width: 767px) { .homepage #page section:first-child { min-height: unset; height: 30vh; } }   This is a

Posted Images

Recommended Posts

  • 0

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.

 

Link to post
  • 0
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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

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

Link to post
  • 0
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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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
Link to post
  • 0
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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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!

Link to post
  • 0
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
Link to post
  • 0
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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

Link to post
  • 0
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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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.

678274797_ScreenShot2020-05-30at7_32_07AM.thumb.png.4c78f68a1766cad33f0788f2da161f48.png774425535_ScreenShot2020-05-30at7_32_28AM.png.a9cfbca0896219821d71387882950cfc.png

 

878948837_ScreenShot2020-05-30at7_28_51AM.png.20f74e819f7b70b21238f917c8f55b21.png552071402_ScreenShot2020-05-30at7_28_29AM.thumb.png.7f7c48e8c459ed4d07c9c51f06753295.png

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

Link to post
  • 0

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

1763273158_Screenshot2020-06-01at16_39_58.thumb.png.3d8d4294ce7a2eca891d8b6dc92d43fe.png

 

 

Screenshot 2020-06-01 at 16.39.58.png

IMG_4963.jpg

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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