Banner Image Won't Resize for Mobile View

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>

@tuanphan 

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?

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

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

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

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?

13 hours ago, tuanphan said:

I see images fullwidth here. Did you solve?

I did, thank you for getting back to me!

On 8/24/2020 at 3:56 AM, tuanphan said:

What is access password?

Grow, thank you!

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! 

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

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 

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! 😭

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>

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

7 hours ago, Geekanoids said:

Our website is now live, super pleased with how the desktop site works. 

 

www.ethiKoala.com

 

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

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

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.

Hi @tuanphan! 

I'm having trouble with my banner size images throughout my website, reflecting on mobile.

I have banner images on almost every page and only a few are showing up properly. Can you please look and tell me what CSS I need to make this work?

The website is www.decideandmoveforward.com

I am having the same exact issues as everyone.  http://www.quarterhorseband.com/ desktop is fine.  Mobile view cuts off most of the band and I've tried several of the codes that were used to solve in this thread.   Using WAV template.  Please help:)

On 9/3/2020 at 12:01 AM, GatherCreativeStudio said:

Hi @tuanphan! 

I'm having trouble with my banner size images throughout my website, reflecting on mobile.

I have banner images on almost every page and only a few are showing up properly. Can you please look and tell me what CSS I need to make this work?

The website is www.decideandmoveforward.com

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#the-decision-coach figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#the-decision-coach {
    height: 225px;
}
}

On 9/3/2020 at 10:36 AM, mholms said:

I am having the same exact issues as everyone.  http://www.quarterhorseband.com/ desktop is fine.  Mobile view cuts off most of the band and I've tried several of the codes that were used to solve in this thread.   Using WAV template.  Please help:)

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#home-1 {
    height: 180px;
}
}

Hi, my site is also having the same issue. I want my top banners on each page to resized on mobile instead of cropped. Tried some css from here but didn't work :(  Would really appreciate the help! 

https://disc-mustard-35hy.squarespace.com/
Password: ahawebsite123

Thank you so much!