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
10 hours ago, MeToo said:

 

@tuanphan 

Hello, I'm having a similar problem. My Banners on my "Home" & "Price" Page won't resize for mobile viewing. 

https://megalodon-dove-5dga.squarespace.com/config/pages

PW: hairbraiding123

Thanks for all your help!

I see both fine here. Did you find the solution?

Link to post
  • 0
On 8/19/2020 at 11:38 PM, Asiya said:

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

I see fine here. It seems you solved?

Link to post
  • 0
On 8/20/2020 at 3:41 PM, WORKOUTWOLF said:

Hi @tuanphan thank you for doing that. That seems to do the trick. It's slightly higher than we want but if we play about with the height and that it'll make a white line. 

We also need it to happen on the other pages, can you do that at all?

The URL's:

www.workout-wolf.co.uk

www.workout-wolf.co.uk/athletes

www.workout-wolf.co.uk/about

Add to Page Settings > Advanced > Header

This code for Athletes page, but you can also try it on other pages, if they are first section

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 10vh;
}
  }
</style>

 

Link to post
  • 0
9 hours ago, LaurenAlexis4 said:

@tuanphan 

Hello! I have found a code in the thread that almost works but the top half image (my GROW logo) gets cut off by the header. Any chance you could assist with that? Thanks so much!! www.growpostpartum.com

 

What is access password?

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

@tuanphan Hello, I am having the same issues with banners not resizing on my site. On my homepage and on one other page. Website is www.thegriplight.com

I would appreciate any help you can provide. Thanks.

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 40vh;
    margin-top: 10vh;
}
}

 

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

Hi @tuanphan, thanks in advance for your help. I'm having issues resizing my landscape oriented gallery photos on mobile. I want the width to be 100%.

https://www.jamiebiver.com/entertainment

I see images fullwidth here. Did you solve?

Link to post
  • 0

Hello - I am unfortunately having a similar issue on an index page in 7.0 brine. 

tbifundinc.com/about 

I've tried IDing the section ID and implementing the CSS above but I haven't had success. I know I must be missing something. Can you help? I'd like to see the entire image just sized down for mobile. 

Thanks for always being so helpful! 

 2091344545_ScreenShot2020-08-27at3_15_10PM.thumb.png.0d965e11771da7c63e3cdffbc9343ed6.png969860157_ScreenShot2020-08-27at3_15_58PM.png.2fd40d76298f57e4fee6397b15a7fee5.png

Link to post
  • 0
10 hours ago, LaurenAlexis4 said:

Grow, thank you!

Add to Home > Design > Custom CSS

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

 

3 hours ago, jtreese01 said:

Hello - I am unfortunately having a similar issue on an index page in 7.0 brine. 

tbifundinc.com/about 

I've tried IDing the section ID and implementing the CSS above but I haven't had success. I know I must be missing something. Can you help? I'd like to see the entire image just sized down for mobile. 

Thanks for always being so helpful! 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#about-intro img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#about-intro {
    min-height: unset !important;
    height: 145px;
}
}

 

Link to post
  • 0
On 7/7/2020 at 8:25 PM, tuanphan said:

above link doesn't have banner..

try this


@media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top: 90px;
}
}

 

Hi! This code works for fixing the image cropping issue, but while it does that, it makes the text all jumbled up on the resources page. https://portlandprofessionaldoulas.com/resources 

Link to post
  • 0
19 hours ago, portlandprofdoulas said:

Hi! This code works for fixing the image cropping issue, but while it does that, it makes the text all jumbled up on the resources page. https://portlandprofessionaldoulas.com/resources 

Remove abvoe & add this to Page Settings . Advanced > Header

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

 

Link to post
  • 0
12 hours ago, permakink said:

Hello,

I would appreciate your help, I'm having the same issue on my site where the banner image won't resize on mobile view. The link is: http://familystylefest.com 

Thank you so much! 😭

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#welcome-1 {
    min-height: unset !important;
    height: 210px !Important;
}
.homepage .Parallax-item:first-child {
    height: 200px !important;
}
}

 

Link to post
  • 0
Our website is now live, super pleased with how the desktop site works. 
 
 
We have an issue on mobile, where the header is too tall with the menu in it, when looking on smartphone in landscape view.
 
And the scrolling banner will not scale down for portrait view. 
 
Please see screenshots. Do you have a code solution to 1. reduce the header height on mobile only and 2. shrink our scrolling banner gallery on mobile only so each panel is visible and not cropped. 
 
I would be super thankful if anyone can help 😆 
 
 

IMG_8848.jpeg

IMG_8849.jpeg

Link to post
  • 0
7 hours ago, Geekanoids said:
Our website is now live, super pleased with how the desktop site works. 
 
 
We have an issue on mobile, where the header is too tall with the menu in it, when looking on smartphone in landscape view.
 
And the scrolling banner will not scale down for portrait view. 
 
Please see screenshots. Do you have a code solution to 1. reduce the header height on mobile only and 2. shrink our scrolling banner gallery on mobile only so each panel is visible and not cropped. 
 
I would be super thankful if anyone can help 😆 
 

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
10 hours ago, tuanphan said:

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

This is great, thank you so much. 

Is there any way to squeeze the images in even more, which parameter would I change? 

Thanks again.

 
 
Link to post
  • 0
1 minute ago, Geekanoids said:

This is great, thank you so much. 

Is there any way to squeeze the images in even more, which parameter would I change? 

Thanks again.

 
 

edit 30

Link to post
  • 0

Hi @tuanphan,

I have a similar issue with my website banner video.

On homepage, there is a lighting exploded video and the size of this video is not changing on mobile version. It got cropped in the middle.

Could you please share me the code for fixing this issue?

Website : revelucent.com

Thank you so much.

 

Edited by dlthdus0817
Link to post
  • 0
20 hours ago, tuanphan said:

edit 30

On 9/1/2020 at 12:09 AM, tuanphan said:

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

You are a star Tuanphan … thank you so much for your help 😄  this worked perfectly. 

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