Banner Image Won't Resize for Mobile View

@tuanphan That worked! Also, you brought up a good point about the video page. For that, I separated the text from the background image. I think I will do that for my other banners. Thank you so much.

Hi,

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

https://www.animikiitheatre.com/

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?

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

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

Mobile

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

 

Mobile

 

Sent the code. You can check it again

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.

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.

 

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.

Hi tuanphan ,

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

Website: https://akademie.leicavietnam.com/

Tips on code to use?

Thanks,

Desktop and mobile view are attached.

On 12/1/2021 at 4:35 PM, LeicaAkademieVietnam said:

Hi tuanphan ,

 

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

Website: https://akademie.leicavietnam.com/

Tips on code to use?

Thanks,

 

Desktop and mobile view are attached.

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

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

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

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

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

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

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

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

Mobile:

Thank you in advance for help!!

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:

 

Mobile:

 

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

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 

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?

Hi @tuanphan

All the banner images on the homepage. Is there a way to select how cropped it is? It's fine if it isn't full width but ideally less cropped than now? Perhaps cropped like red below?

Thank you very much

Hi Tuanphan. Just to let you know I figured this issue out. Thank you

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

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/

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>

@tuanphan THANK YOU SO MUCH!

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

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

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