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

Hello!

I'm having the same problem with a website I'm building for a client. They have a team photo as their banner image for the HOME page and the TEAM page. We want everyone to be viewable on mobile as well.

the URL is http://www.verbatimpharma.com

I've tried a whole bunch of code snippets in this thread but none of them have worked.

VP-home-banner-desktop.JPG

VP-home-banner-mobile.JPG

VP-team-banner-desktop.JPG

VP-team-banner-mobile.JPG

Link to post
  • 0
On 11/13/2020 at 12:48 AM, tiffa said:

Thank you @tuanphan! The code worked great for the home page!!! How could I get this to work for the Our Team page as well?

 

Use this code for Our Team page

@media screen and (max-width: 2500px) {
    body#collection-5d0ff09d17e3300001eca080 .Parallax-item:first-child img {
        width:100% !important;
        height: auto !important;
        left: 0 !important
    }

    body#collection-5d0ff09d17e3300001eca080 .Parallax-item:first-child figure {
        transform: unset !important
    }

    section#about-our-team {
        min-height: unset !important;
        height: 450px
    }
section#about-our-team .spacer-block {
    display: none;
}
section#about-our-team h2 {
    font-size: 50px;
    position: relative;
    top: -50px;
}
}

 

Link to post
  • 0
8 hours ago, jonathancajina said:

I tried all the codes in previous posts but none of them work. It still wont resize my banner image on my homepage. Any help @tuanphan?

my website is : https://yaahdy.com/

This is what it looks like on desktop vs mobile:

You can add 2 sections & design layout for mobile/desktop. Then we will give the code to hide 1 section on desktop, hide 1 section on mobile

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

You can add 2 sections & design layout for mobile/desktop. Then we will give the code to hide 1 section on desktop, hide 1 section on mobile

what is the code? or do I have to create a whole new design for mobile first?

Link to post
  • 0
13 minutes ago, jonathancajina said:

what is the code? or do I have to create a whole new design for mobile first?

You add 2 sections first, then we can check code easier.

Link to post
  • 0

Add 2 banners will be easier.

Add to Home > Design > custom CSS

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

 

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

Add 2 banners will be easier.

Add to Home > Design > custom CSS


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

 

hi there @tuanphan thank you for helping so many others in a similar position as im in right now. my websites banner image on desktop looks like this:  image.thumb.png.bedcae72de52563d5e06a4e54034feb9.png

 

but my mobile looks like this: 

image.thumb.png.6a71e7d128b6bbab61ffbf6e71994599.png

 

is there a way i can fit the entire image on the mobile view in the same way as it fits on the desktop?

Thank you so so much! this is for my partner and my wedding so this would mean the world if you could help!

-Brady

Link to post
  • 0
3 minutes ago, bwheeler424 said:

hi there @tuanphan thank you for helping so many others in a similar position as im in right now. my websites banner image on desktop looks like this:  image.thumb.png.bedcae72de52563d5e06a4e54034feb9.png

 

but my mobile looks like this: 

image.thumb.png.6a71e7d128b6bbab61ffbf6e71994599.png

 

is there a way i can fit the entire image on the mobile view in the same way as it fits on the desktop?

Thank you so so much! this is for my partner and my wedding so this would mean the world if you could help!

-Brady

and the website is augustabrady2021.com

Link to post
  • 0
2 hours ago, bwheeler424 said:

and the website is augustabrady2021.com

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0

HI, 

i was wondering if i can get some help for our header image carousell to be rescale based on the width of the mobile screen?

We would like the image not to be cropped, just resized. 

our website is

https://www.universalbakehouse.my/

 

I tried using this but doesn't seem to work

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
    margin-top: 5vh;
}
}
Link to post
  • 0
19 hours ago, UniversalBakehouse said:

HI, 

i was wondering if i can get some help for our header image carousell to be rescale based on the width of the mobile screen?

We would like the image not to be cropped, just resized. 

our website is

https://www.universalbakehouse.my/

 

I tried using this but doesn't seem to work


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

You mean image under header on homepage?

11 hours ago, introverb said:

Hi - I've scrolled through this thread all day and nothing is working for mine 😧 

Would someone mind helping me out with some CSS? My site is : www.opbranding.com

Thanks so much!

Hi. Which banner?

Link to post
  • 0
On 11/22/2020 at 2:26 AM, tuanphan said:

You mean image under header on homepage?

Hi. Which banner?

I'm really only concerned about the ones on the home page. On desktop, my photo on the header, as well as my logo designs on the parallax banners, are visible. But on mobile it cuts down to the center. So I'm wondering if there's a fix, or if I can make a separate site and have mobile viewers fwd-ed there, or if I need to just start from scratch.

Thanks!

Link to post
  • 0

There's a pretty simple solution in 7.1

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {

section[data-section-id="find your section ID below"]{

    min-height: 50vh !important;

}

}

Find your section ID here.

Then adjust the height of your banner by changing the "vh" value.

Note that while making your banner higher, your image will be automatically zoomed in to fit the size of the container.

Edited by christopheregg
Link added
Link to post
  • 0
On 11/27/2020 at 6:40 PM, sonjacorbett said:

Hi there, I am having the a similar problem through none of the solutions mentioned are quite working. 

I need to header banner to show 100% width and 100% height on all media queries. The code mentioned above creates a large white space below the header.

website is: 

https://the-big-back-scratch.squarespace.com/

p/w:magico

Thank you so much in advance.

 

You mean dog - cat banner?

On 11/27/2020 at 12:51 AM, stephgo said:

Hi there,

I tried my best - but without success...

Can someone pls help with resizing the banner image? Thanks a lot!

www.immerdieanderen.de

 

I see banner fine here. Do you still need help?

Link to post
  • 0
On 11/24/2020 at 2:19 AM, Tascha1992 said:

Hello, I'm helping someone with designing their site and created a banner that now doesn't scale on mobile view. I was wondering what I should add in the custom css?

http://www.goldenmaid.net/

You mean banner image on cover page?

Link to post
  • 0

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

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