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

Hi there Tuanphan! Thank you for all of this advice! So kind of you to help everyone out! I sent the following message to your inbox but want to post it here as well in the forum. Please let me know if you can help me, have to do this in two days! All the best, Millicent here’s the msg I sent: 

Hi there! I work in communications and media, but I don’t do design at all! However, having to put a site together for a non profit on my own in just a couple of days and I normally only do the branding and writing.. can you please help me with my banner image? I need to resize it for mobile. This is for a non profit promotion for Amish farmers and they do not allow their photos to be taken so am using all AI generated images. I like the image I have for the banner on the web as I’m doing stylized photos since all I can use is AI but can’t get it to work on mobile. If you can advise, would very much appreciate it! Thanks for all the advice you give out! so kind!  The site is not live yet, so how can I best show it to you? Am attaching a screenshot of how the banner looks as I have it in the draft stage and attaching the image itself as it was before I tweaked it for homepage banner I’ll post this in the forum where you’ve been advising on mobile banners also. Thank you!!!

Millicent Smith

On 5/10/2024 at 12:09 PM, MillicentSmith said:

Hi there Tuanphan! Thank you for all of this advice! So kind of you to help everyone out! I sent the following message to your inbox but want to post it here as well in the forum. Please let me know if you can help me, have to do this in two days! All the best, Millicent here’s the msg I sent: 

Hi there! I work in communications and media, but I don’t do design at all! However, having to put a site together for a non profit on my own in just a couple of days and I normally only do the branding and writing.. can you please help me with my banner image? I need to resize it for mobile. This is for a non profit promotion for Amish farmers and they do not allow their photos to be taken so am using all AI generated images. I like the image I have for the banner on the web as I’m doing stylized photos since all I can use is AI but can’t get it to work on mobile. If you can advise, would very much appreciate it! Thanks for all the advice you give out! so kind!  The site is not live yet, so how can I best show it to you? Am attaching a screenshot of how the banner looks as I have it in the draft stage and attaching the image itself as it was before I tweaked it for homepage banner I’ll post this in the forum where you’ve been advising on mobile banners also. Thank you!!!

Millicent Smith

What is site url?

Hey Tuanphan, 

Not sure if this is the right topic thread but is there a code that can help us with the video banner to be also responsive on mobile? What we placed right now is just a very first rough version of what it will be close a minute video.

Thanks again for your help!

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

On 5/17/2024 at 9:44 PM, Dario88c said:

Hey Tuanphan, 

Not sure if this is the right topic thread but is there a code that can help us with the video banner to be also responsive on mobile? What we placed right now is just a very first rough version of what it will be close a minute video.

Thanks again for your help!

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

 

Try this to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6613ff16f9286224504f4215"] {
    min-height: unset !important;
    height: 30vh !important;
    margin-top: 10vh;
}
}

Hello, could you help with this issue too please. My banner isn't adjusting to fit the mobile screen well. 

https://www.consciousfinancecoaching.com/queen-it-up

On 9/13/2024 at 2:46 PM, carolglynn said:

Hello, could you help with this issue too please. My banner isn't adjusting to fit the mobile screen well. 

https://www.consciousfinancecoaching.com/queen-it-up

I think image is already fine