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.

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.

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.

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

Create an account or sign in to comment

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

×
×
  • Create New...