Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5

Banner Image Won't Resize for Mobile View


TheIDBootCamp

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 comment

Recommended Posts

  • 0
On 10/21/2021 at 5:24 PM, AdamGriffiths said:

Hi,

I am getting the same issue with the banner photos throughout my website on mobile. Any solutions?

https://www.animikiitheatre.com/

Hi,

Can you share all links where you have problem with banner. We will check & give the code

On 10/21/2021 at 11:36 PM, NannySara said:

I have also tried many of these codes and none of them have worked for me. My site isn't like yet so I do not have a link. Can anyone help me?

Hi. You can setup password & share url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/30/2021 at 3:25 AM, graffitiversal12 said:

Hi tuanphan ,

 

I'm having the same issue. Banner won't show fully on mobile.

Website: www.graffitiversal.com

Tips on code to use?

Thanks,

 

Desktop

image.thumb.png.7909b5de29c40cea8534c65360803cf3.png

 

Mobile

 

image.png.57012354c1c26c8903e43d79f315424b.png

Sent the code. You can check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hello @tuanphan.

This code worked perfectly for the revolving banner gallery on our homepage but it has not worked for the static banner image on each project page.

Quote

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

For example, on the Revelations project, but also on all the other pages except the homepage.

https://www.balancedeartharchitects.com/revelations

Password is BEA.

Many thanks for your help.

 

Screen Shot 2021-11-29 at 10.45.39 am.png

Screen Shot 2021-11-29 at 10.45.46 am.png

Link to comment
  • 0
On 11/29/2021 at 6:47 AM, BEarchitects said:

Hello @tuanphan.

This code worked perfectly for the revolving banner gallery on our homepage but it has not worked for the static banner image on each project page.

For example, on the Revelations project, but also on all the other pages except the homepage.

https://www.balancedeartharchitects.com/revelations

Password is BEA.

Many thanks for your help.

 

Screen Shot 2021-11-29 at 10.45.39 am.png

Screen Shot 2021-11-29 at 10.45.46 am.png

Add to Design > Custom CSS

/* revelations banner mobile */
@media screen and (max-width:767px) {
[data-section-id="619da14f6dbbd5325a824dbc"] {
    min-height: unset !important;
    height: 50vh;
}
}

Do similar for other image sections. Use this tool to find data section id.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/4/2021 at 2:19 PM, tuanphan said:

Add to Design > Custom CSS

/* resize mobile top image */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

image.thumb.png.6fdc7ddf178fafd8f788800ed6d408e7.png

Thank you Tuan !! The code works like a charm for images, but we want to put a video on the homepage and it dosen't look well on mobile. Can you give me a code to fix this?

THanks in advance!!

image.png

262544113_990484418173078_3841066147820932102_n (1).jpg

Link to comment
  • 0

@tuanphan Hijacking this post, I've tried quite a few of your solutions, but cant seem to get it to work for my banner images. I have a parralax code injection in my site, but even when I removed this to try these css solutions, my banner images didn't resize correctly. Are you able to check it out? The site is www.nealstmc.com.au I have banner images on most of the pages. Thank you!!

Link to comment
  • 0
On 12/7/2021 at 6:01 PM, LeicaAkademieVietnam said:

Thank you Tuan !! The code works like a charm for images, but we want to put a video on the homepage and it dosen't look well on mobile. Can you give me a code to fix this?

THanks in advance!!

image.png

262544113_990484418173078_3841066147820932102_n (1).jpg

Try this code for mobile

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#home-top-copy {
    height: 250px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/8/2021 at 2:25 AM, kellicox90 said:

@tuanphan Hijacking this post, I've tried quite a few of your solutions, but cant seem to get it to work for my banner images. I have a parralax code injection in my site, but even when I removed this to try these css solutions, my banner images didn't resize correctly. Are you able to check it out? The site is www.nealstmc.com.au I have banner images on most of the pages. Thank you!!

Add to Design > Custom CSS

/* resize mobile home top banner image */
@media screen and (max-width:767px) {
[data-section-id="619859d198dc455c9635f22f"] {
    min-height: unset !important;
    height: 40vh;
    margin-top: 15vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan Having the exact same issues as many people earlier on this post. I also have banners on pretty much every single page and all are cut off when viewing on mobile. Ive injected every code you earlier suggested an none are working on my site. 

 

website is www.ballybrookfarm.com

Desktop:

2013773364_ScreenShot2022-01-08at11_09_47AM.thumb.png.b61f93f268c5e2ae2a038cbc21d45cd9.png

 

Mobile:

image0.thumb.png.aac7955ff3bbae13e0321c904b13df50.png

 

Thank you in advance for help!!

 

Link to comment
  • 0
On 1/8/2022 at 11:15 PM, KateBBFarm said:

@tuanphan Having the exact same issues as many people earlier on this post. I also have banners on pretty much every single page and all are cut off when viewing on mobile. Ive injected every code you earlier suggested an none are working on my site. 

 

website is www.ballybrookfarm.com

Desktop:

2013773364_ScreenShot2022-01-08at11_09_47AM.thumb.png.b61f93f268c5e2ae2a038cbc21d45cd9.png

 

Mobile:

image0.thumb.png.aac7955ff3bbae13e0321c904b13df50.png

 

Thank you in advance for help!!

 

Try adding to Design > Custom CSS

/* resize mobile homepage */
@media screen and (max-width:767px) {
section#seclusion-words figure img {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
}
section#seclusion-words {
    min-height: unset !important;
    height: 250px !important;
}
section#seclusion-words .spacer-block {
    display: none !important;
}
section#seclusion-words .image-block {
    width: 50%;
    margin: 0 auto;
}
section#seclusion-words h2 {
    font-size: 20px;
    position: relative;
    top: -30px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi Everyone

I am having the exact same problem and have tried almost every code on this page but it isn't working for me. 

On my desktop the pictures are perfect but on mobile they are long and zoomed in. Would you be able to help me keep the original width please? (It's ok if some of the height cuts off).

This is the page. www.violetjamesstudio.com

Thank you very much

Charley 

Link to comment
  • 0
17 hours ago, Charley14 said:

Hi Everyone

I am having the exact same problem and have tried almost every code on this page but it isn't working for me. 

On my desktop the pictures are perfect but on mobile they are long and zoomed in. Would you be able to help me keep the original width please? (It's ok if some of the height cuts off).

This is the page. www.violetjamesstudio.com

Thank you very much

Charley 

Top image on homepage, or all (3 images) on homepage?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/18/2022 at 8:27 AM, goodsoleil said:

@tuanphan I'm also having issues with the banner image. There is a video underneath, and I want to be sure it still plays if I use your codes. Code suggestions?

Site: https://goodsoleil.com/

Screen Shot 2022-02-17 at 5.26.45 PM.png

Screen Shot 2022-02-17 at 5.27.02 PM.png

Add to Settings > Advancd > code Injection > Header

<style>
  @media screen and (max-width:767px) {
  [data-section-id="61c804f61469db271b941995"] {
    min-height: unset !important;
    height: 45vh;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi 

I am also having an issue with my banner video. It fits to a mobile screen (very small) with a large black spacing underneath. I would like the video to stretch and play on mobile. 

Link to my site:

www.jonkmanshof.com

I've also attached 2 images below, the red circle shows the space underneath.

Hope to get some help!

Thanks

main page.JPG

large open space.JPG

Link to comment
  • 0
On 3/5/2022 at 2:10 AM, Jo_Vee said:

Hi 

I am also having an issue with my banner video. It fits to a mobile screen (very small) with a large black spacing underneath. I would like the video to stretch and play on mobile. 

Link to my site:

www.jonkmanshof.com

I've also attached 2 images below, the red circle shows the space underneath.

Hope to get some help!

Thanks

main page.JPG

large open space.JPG

Don't remove any code in your current code

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
section#hero-banner {
    min-height: unset !important;
    height: 180px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi There,

I need help resizing the banner slideshow on the mobile version.

www.thedesignmaker.ca 

Desktop version is great but the mobile version crop the images and looks bad, I want to show the full length of the images.

I've tried a bunch of code from the forum but nothing worked.

If anyone could help me it would be really appreciate.

Thank you!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...