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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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

Posted Images

Recommended Posts

  • 0
14 hours ago, SunnyC said:

Hi @tuanphan,

I've tried using the CSS snippets you provided but keep getting the error message "error reverting."

I have a couple of banner images with text that aren't rendering for mobile on my home page(screenshots attached). I'm using the brine template and version 7.0 (I think) 

Could you please help me resizing the images - specifically the gallery images with text, and the 2 banners (brands and success stats)? None of the code is working 😕

The url is provided in the screenshot - 

Screen Shot 2020-12-07 at 3.42.09 PM.png

Screen Shot 2020-12-07 at 3.42.35 PM.png

Can you share site url? We can check easier

Link to post
  • 0

Hi @tuanphan, wondering if you could help me with my banner size under "Our Space" as shown (url theshophousecollection.com) - I'd like to retain the full width of the banner image even when in mobile-view so that it doesn't get cropped into a closeup! pw is linger123. Thank you so much!

 

 

Screenshot 2020-12-08 at 17.29.41.png

Screenshot 2020-12-08 at 17.29.57.png

Link to post
  • 0
On 1/5/2020 at 4:01 AM, tuanphan said:

Add to Home > Design > Custom CSS


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

 

hi! this does not work for me, i hgave tried several ones from you, can you help me?

 

www.nicolelee.ar

first banner

Link to post
  • 0

Hey there, could anyone help with this one?

The Homepage banner image crops hard on mobile, would it be possible to not crop it and look as much as like the desktop version?

My page is www.teemukekkonen.com

Thanks in advance!

Link to post
  • 0
17 hours ago, NICOLE-KEVIN said:

hi! this does not work for me, i hgave tried several ones from you, can you help me?

 

www.nicolelee.ar

first banner

It is old code.

Use this code

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

You can adjust 30vh

Link to post
  • 0
14 hours ago, Tkek said:

Hey there, could anyone help with this one?

The Homepage banner image crops hard on mobile, would it be possible to not crop it and look as much as like the desktop version?

My page is www.teemukekkonen.com

Thanks in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#home-section img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
div#home-section {
    height: 240px;
}
}

 

Link to post
  • 0

 

On 12/11/2020 at 10:04 PM, Zach_OM said:

Hi @taunphan I am having this issue with a side page. We are using the banner image to also hold the page title so we have more control over design. 

https://www.womenofworld.org/what-we-do

image.thumb.png.51858d35e2fb071b95db1a7868e87a03.png

What We Do - Refugee Women Service — Women of the World.png

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5cad62b8eb3931462b21356b .banner-thumbnail-wrapper figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
body#collection-5cad62b8eb3931462b21356b .banner-thumbnail-wrapper {
    height: 55px !important;
    min-height: unset !important;
}
}

 

Link to post
  • 0
On 12/9/2020 at 12:34 AM, shums said:

Hi @tuanphan, wondering if you could help me with my banner size under "Our Space" as shown (url theshophousecollection.com) - I'd like to retain the full width of the banner image even when in mobile-view so that it doesn't get cropped into a closeup! pw is linger123. Thank you so much!

 

 

Screenshot 2020-12-08 at 17.29.41.png

Screenshot 2020-12-08 at 17.29.57.png

I don't see Our Space on homepage. Can you share link to exact page?

Also I see mobile has very long content. You can consider adding a back to top button.

Link to post
  • 0

I'm having the same issue. @tuanphan

Using Aria template on 7.0 and each navigation-linked page is an index page, with the banner populated by the first page in the index page. 

Can't seem to get the banner to go full width on mobile using the different css snippets i found in this thread. Please help!

Would love to see this working on these two pages as examples:

http://www.wearerun51.com/

and

http://www.wearerun51.com/bio

desktop.png

mobile.png

Edited by sketchism
Link to post
  • 0

Hi @tuanphan,

Thank you for helping so many with this issue. I was hoping you could help me with the same issue as well. We have banner images across all pages on our site...some with text overlay, and they are not resizing properly for mobile and tablet. The codes previously added to this thread didn't work for me. Can you please help? The site is https://www.strongertogetherca.com/

Thank you in advance!

Link to post
  • 0

Hey again @tuanphan!  I'm in the process of changing over to a different template family for my website.  We are switching from York (Harris) to Brine(Brine) both 7.0.  And the custom header you gave me for my blog is no longer working as a result.  The code doesn't seem to have any effect on the page anymore.  Here is the code that you gave me before that worked beautifully: 

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

 

The banner images for the blog page (blog) as well as the podcast page (also blog) are getting aggressively cropped.  I'd love if they were fixed to always have the image show in full with the image taking up 100% of the width of the screen.  Could you help me make this work for my new template?  Thank you so much!  

 

My website is www.elevategsa.com and "Blog" as well as "Podcast" have the banner issues described. 

Link to post
  • 0
On 12/19/2020 at 2:34 AM, StrongerTogetherCA said:

Hi @tuanphan,

Thank you for helping so many with this issue. I was hoping you could help me with the same issue as well. We have banner images across all pages on our site...some with text overlay, and they are not resizing properly for mobile and tablet. The codes previously added to this thread didn't work for me. Can you please help? The site is https://www.strongertogetherca.com/

Thank you in advance!

Add to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
body.homepage .Parallax-item:first-child figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
section#stronger-together {
    min-height: unset !important;
    height: 200px;
}
}

 

Link to post
  • 0
6 hours ago, CHartsell said:

Hey again @tuanphan!  I'm in the process of changing over to a different template family for my website.  We are switching from York (Harris) to Brine(Brine) both 7.0.  And the custom header you gave me for my blog is no longer working as a result.  The code doesn't seem to have any effect on the page anymore.  Here is the code that you gave me before that worked beautifully: 

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

 

The banner images for the blog page (blog) as well as the podcast page (also blog) are getting aggressively cropped.  I'd love if they were fixed to always have the image show in full with the image taking up 100% of the width of the screen.  Could you help me make this work for my new template?  Thank you so much!  

 

My website is www.elevategsa.com and "Blog" as well as "Podcast" have the banner issues described. 

I see banner fullsize on mobile here?

https://www.elevategsa.com/gsablog

Link to post
  • 0
On 12/18/2020 at 3:05 AM, sketchism said:

I'm having the same issue. @tuanphan

Using Aria template on 7.0 and each navigation-linked page is an index page, with the banner populated by the first page in the index page. 

Can't seem to get the banner to go full width on mobile using the different css snippets i found in this thread. Please help!

Would love to see this working on these two pages as examples:

http://www.wearerun51.com/

and

http://www.wearerun51.com/bio

desktop.png

mobile.png

Add to Home > Design > custom CSS

/* resize mobile banner */
@media screen and (max-width:640px) {
section#main-page figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#main-page {
    min-height: unset !important;
    height: 220px;
}
}

 

Link to post
  • 0
7 hours ago, tuanphan said:

I see banner fullsize on mobile here?

https://www.elevategsa.com/gsablog

@tuanphanOn mobile, the banner is getting horizontally cropped.  Go to https://www.elevategsa.com/podcast to get a better idea since that banner image is less abstract.

On the desktop version of the site it is getting vertically cropped.  I've attached an image for you to see what's going on.

 

Screen Shot 2020-12-21 at 10.13.36 AM.jpg

Edited by CHartsell
Link to post
  • 0
10 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* resize mobile home banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
body.homepage .Parallax-item:first-child figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
section#stronger-together {
    min-height: unset !important;
    height: 200px;
}
}

 

@tuanphan, thank you. It worked for the Hom page, but didn't re-adjust the other pages on the site. Each page has a banner image across the top of the page. Can you please help me adjust the others as well?

Link to post
  • 0
3 hours ago, StrongerTogetherCA said:

@tuanphan, thank you. It worked for the Hom page, but didn't re-adjust the other pages on the site. Each page has a banner image across the top of the page. Can you please help me adjust the others as well?

Can you share link to all pages where you need to resize banners?

Link to post
  • 0
On 12/21/2020 at 2:30 PM, tuanphan said:

Can you share link to all pages where you need to resize banners?

@tuanphan

https://www.strongertogetherca.com/

https://www.strongertogetherca.com/about-us

On the about-us page, there are 2 other banners further down that also need re-adjusting. 

And thank you so much for your time and hlp with this!

Edited by StrongerTogetherCA
Link to post
  • 0

Hi @tuanphan

I can see that you've helped many others. I have some difficulty finding the right code, for at webpage im working on. 

When it's used on mobile the banner picture doesn't resize. I have tried some of the code you've written here, but when used, the text on the other pages get smushed together. 

 

The resizing is only needed on one page, but in all 3 languages. Can you help me?

The URL is: 

English: https://www.waytothenations.org/the-story-behind

Italian: https://www.waytothenations.org/la-nostra-storia

Portuguese: https://www.waytothenations.org/nossa-historia

 

Thanks in advance :)

Link to post
  • 0

Hi @tuanphan

Like Didde above I've seen that you've been able to help other with these issues so I'm hoping you can do the same for me. 

Our websites banner size is off on both desktop, and mobile and I can't figure out why. The dimensions are following the suggested width guidelines of between 1500-2500px.

This is the webpage for your reference: https://www.pearlonking.com/shop-skinceuticals

This banner will only be present on this page. I hope you're able to help! Thank you

Link to post
  • 0

@tuanphan hope that SS has you on their payroll! lol After going through this lengthy chain and seeing how many people you've helped.  Hoping you, or someone else, can help me out!  I've tried various bits of code throughout this chain but none of the results have worked.  I'm trying to resize the entire section (text included) if possible, but it only resizes the banner image and the <h1> doesn't move.   

I would like to implement this on every single page, I understand the 'collection' or 'section' will be different for each but was hoping you could help me with 1 page and I would implement on every page.  Just not sure if I'm swapping in all of the correct pieces of information.  

www.bachandlafleurgc.com          pw: build

resize-banner-test.jpg

Link to post
  • 0
On 12/29/2020 at 4:01 AM, Summit227 said:

@tuanphan hope that SS has you on their payroll! lol After going through this lengthy chain and seeing how many people you've helped.  Hoping you, or someone else, can help me out!  I've tried various bits of code throughout this chain but none of the results have worked.  I'm trying to resize the entire section (text included) if possible, but it only resizes the banner image and the <h1> doesn't move.   

I would like to implement this on every single page, I understand the 'collection' or 'section' will be different for each but was hoping you could help me with 1 page and I would implement on every page.  Just not sure if I'm swapping in all of the correct pieces of information.  

www.bachandlafleurgc.com          pw: build

resize-banner-test.jpg

Add to Home > design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
}
}

 

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