how to reduce banner image sizes to fit mobile device?

Having same problem just with mobile homepage banner not resizing enough on small iPhones. None of the code above worked. https://theagapecenter.org

15 hours ago, Coachtech said:

Having same problem just with mobile homepage banner not resizing enough on small iPhones.

The banner image is designed to do this. Rather than trying to resize the banner image, it is better to remove the text/logo from the image and display the logo as a separate block over the banner image. In this way, the logo size can be controlled, independently of the header background image.

I say this because:

• The banner image is also a problem on larger screen sizes (see screenshot below)
• If you resize the banner image for mobiles, the logo will be much smaller and potentially unreadable by some users

Another point regarding images, you may want to check the alt text for your images. Alt text is the text you add to images to identify the content of the image. It makes them more accessible to visitors and can improve your site's visibility on search engines. Your image titles currently have titles like "Agape Banner Cropped2" and "jason-blackeye-145755". 

I hope this helps.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hello there, I would also like help either choosing the crop for my banner image per page on my site or fitting the banner while in mobile setting. I tried cut and pasting the other codes and they don't work.

https://www.mariejamora.com/

The main page is fine but if you click on any of the images, then it crops the banner.

Thank you!

15 hours ago, MarieJamora said:

Hello there, I would also like help either choosing the crop for my banner image per page on my site or fitting the banner while in mobile setting. I tried cut and pasting the other codes and they don't work.

 

https://www.mariejamora.com/

The main page is fine but if you click on any of the images, then it crops the banner.

 

Thank you!

You can add this to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
body.collection-5e5de0d1f951361518ef3d17.view-item article>section:first-child {
    min-height: unset !important;
}
}

Thank you! It worked. Appreciate it!

Hi @tuanphan, I've also tried to adapt the other codes but can't get this to work! I'd love for the top banner on this site to be responsive on mobile devices: 

https://www.idha-nyc.org/core-curriculum-draft

On 8/31/2023 at 11:11 AM, idha_nyc said:

Hi @tuanphan, I've also tried to adapt the other codes but can't get this to work! I'd love for the top banner on this site to be responsive on mobile devices: 

https://www.idha-nyc.org/core-curriculum-draft

Use this code to Custom CSS box

/* Core Curriculum Draft page */
@media screen and (max-width:640px) {
body#collection-649cd60f19f7c556b6ae557c .Parallax-item:first-child img {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
}
section#cc-header {
    height: 200px;
}
}

Thank you so much, this worked!

On 7/14/2020 at 7:51 PM, tuanphan said:

I don't see banner. Which banner?

Hi Tuan,

I'm having a similar issue, hoping you can help me. Currently my mobile banner gets cut off, is there any way I can get it to resize? Not sure if I'll have to change the dimensions of the main image? 

Here's the URL to my website: thealmanator.com

Also how would I enter the code? Would I simply go to pages > website tools> custom css and enter the code there? (Sorry this is my first website)

Thanks in advance!

On 9/3/2023 at 1:24 AM, tuanphan said:

Use this code to Custom CSS box

/* Core Curriculum Draft page */
@media screen and (max-width:640px) {
body#collection-649cd60f19f7c556b6ae557c .Parallax-item:first-child img {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
}
section#cc-header {
    height: 200px;
}
}

 

Hi @tuanphan, I'm having a similar issue, hoping you can help me. Currently my mobile banner gets cut off, is there any way I can get it to resize? Not sure if I'll have to change the dimensions of the main image? Here's the URL to my website: thealmanator.com Also how would I enter the code? Would I simply go to pages > website tools> custom css and enter the code there? (Sorry this is my first website) Thanks in advance!

On 1/23/2024 at 12:48 PM, thealmanator said:

Hi Tuan,

I'm having a similar issue, hoping you can help me. Currently my mobile banner gets cut off, is there any way I can get it to resize? Not sure if I'll have to change the dimensions of the main image? 

Here's the URL to my website: thealmanator.com

 

Also how would I enter the code? Would I simply go to pages > website tools> custom css and enter the code there? (Sorry this is my first website)

Thanks in advance!

Which page are you referring to? I don't see banner on homepage

Not sure if the CSS is different depending on the page. But I've tried a couple on this thread that have not helped me. I'm trying to get my home page banner to resize to the mobile phone. Can you help me? this is my website www.bma.us. Attached is a picture of the banner circled in red. 

On 3/4/2024 at 10:44 PM, bmaweb said:

Not sure if the CSS is different depending on the page. But I've tried a couple on this thread that have not helped me. I'm trying to get my home page banner to resize to the mobile phone. Can you help me? this is my website www.bma.us. Attached is a picture of the banner circled in red. 

You can use this code to Website > Website Tools > Custom CSS

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

Hi,

I am having the same issue of making this

top banner: section[data-section-id="661f53df287ca660754dd879"] shrink in mobile view. I've tried multiple codes and they are not working.

https://www.asianpilots.org/nexgen-takeoff

Please help!

Thanks,

Carly

On 4/20/2024 at 1:11 AM, CarlyFly said:

Hi,

I am having the same issue of making this

top banner: section[data-section-id="661f53df287ca660754dd879"] shrink in mobile view. I've tried multiple codes and they are not working.

https://www.asianpilots.org/nexgen-takeoff

Please help!

Thanks,

Carly

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:991px) {
[data-section-id="661f53df287ca660754dd879"] {
    min-height: unset !important;
    margin-top: 5vh;
}
}

Hello everyone,

I'm looking for custom code that will keep the background image (our services section) only on the homepage for desktop users, while ensuring it disappears for the mobile version. 

Here is the link: https://beagle-cod-7bmw.squarespace.com/ and here's the password: 5p0rt51nv3st2024
 
Thank you!

Dario

On 4/23/2024 at 7:49 PM, Dario88c said:

Hello everyone,

I'm looking for custom code that will keep the background image (our services section) only on the homepage for desktop users, while ensuring it disappears for the mobile version. 

Here is the link: https://beagle-cod-7bmw.squarespace.com/ and here's the password: 5p0rt51nv3st2024
 
Thank you!

Dario

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6613ff16f9286224504f421e"] .section-border img {
    opacity: 0;
}
}