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

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 404
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

Recommended Posts

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

Link to post
  • 0

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

 

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

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

 

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

 

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?

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

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

 

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

 

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

 

Link to post
  • 0
1 hour ago, junaaaa said:

@tuanphan

I am having the same issue with the banner not resizing on my mobile screen. For me its each of the different pages all across the site, not just one particular page. 

My website is: https://www.junadesign.co/

 

Add to Portfolio Page Settings > Advanced > Header

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

 

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