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 292
  • 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
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>

 

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

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

 

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

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

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

 

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

 

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

 

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

 

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

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
  • 0

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

Screen Shot 2020-09-02 at 1.01.10 PM.png

Screen Shot 2020-09-02 at 1.01.20 PM.png

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

 

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