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

Banner Image Won't Resize for Mobile View

Recommended Posts

7 hours ago, Time24go said:

Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5c05149d575d1f312eb16a23 {
section.Intro.Intro--has-image p, section.Intro.Intro--has-image h3:nth-last-child(3) {
    display: none;
}
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Thank you, tuanphan for your reply and help. I've added in the code but it did not make a difference. I've also tried adding !important to the end of the code but there was no change.

Share this post


Link to post
Posted (edited)

Hello Taunphan, Maybe you can help me with my issue.

I have the same issue where ALL my images do not resize to mobile mode. When I tried one of the codes in this thread, it helped but created a big gap in between the rest of the content on my home page, etc. Also on my about and projects section. Every spacing does not scale properly with the images.

I also have a problem with the gallery images on my projects. They are not responsive to the mobile mode either. 

I tried everything. Hopefully you can help 🤞

 

my website www.hkid.ca

 

Capture.JPG

error.JPG

error2.JPG

Edited by HaniKrich

Share this post


Link to post

@tuanphan

I'm having the same problem. The banner on this page — https://thehenleygroup.com/covid-news — looks fine in desktop, but on mobile it is too long, and doesn't keep to the same size on this page: https://www.thehenleygroup.com/solutions

Can you help? What CSS should I use to keep the banner short on https://thehenleygroup.com/covid-news like it is on https://www.thehenleygroup.com/solutions. Thank you!

 

 

Share this post


Link to post
19 hours ago, jeady013 said:

I tried the code you gave me but the banner images still aren't equally proportioned during my mobile view. Is there a different code I could try? 

url: https://www.intlschooloftheprophets.com

I see you solved with this code?

@media screen and (max-width: 780px) {
    .homepage section:first-child {
        min-height:unset !important;
        height: 80vh
    }
}

I think 767 is better


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
On 6/24/2020 at 5:53 AM, ROleary said:

Hi! I need help getting the mobile banner to appear wider as it's cutting off some of the lettering. 

Any help would be appreciated!

rolearybooks.com

Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5ea9f04b8645947705e66c45 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 35vh !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 35vh !important;
    min-height: auto !important;
}
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
9 hours ago, crtphoto728 said:

hi @tuanphan  I can't seem to get my mobile banner to resize.  The banner on desktop fits fine but the letters get chopped off. 

https://www.corinnetouseyphotography.com/

thank you!

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

 

You are wonderful! Thank you so much, that worked!

Share this post


Link to post
18 hours ago, tuanphan said:

@media screen and (max-width:640px) { body#collection-5ea9f04b8645947705e66c45 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 35vh !important; } .Parallax-item:first-child { height: 35vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 35vh !important; min-height: auto !important; } } }

It worked perfectly! Thank you so much 🙂

Share this post


Link to post
On 6/22/2020 at 1:03 PM, EBCE said:

I've got the exact same issue with the gallery slideshow reel i set up on my page. any help would be appreciated!

 

 

https://ebce.ca/casa

Capture.PNG

Capture1.PNG

@tuanphan hey sorry to bother you but do you think you could help me out with the code? site is ebce.ca

Share this post


Link to post

@tuanphan I am having the same issue with my banner not resizing for mobile, website is drfloydrx.com banner at the top (tea) is not resizing but most importantly, at the very bottom on the newsletter sign up banner is not resizing. ive tried this code, not working

 

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

Share this post


Link to post
5 hours ago, caz100 said:

Hi I am also having trouble resizing my banner image for a mobile. 
I have used some of the CSS here and is does make the image fit, but then I am left with a big white space underneath it!

any help would be great. Thanks

my site https://www.rocstudio.co.uk

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
    height: 35vh;
}
section#new-page {
    height: 35vh !important;
    min-height: auto !important;
} 
 section#new-page .spacer-block {
    display: none;
} 
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

Edited by samasplen

Share this post


Link to post

I've tried so much CSS code, and I can't for the life of me figure out how to get my banners / headline images to be responsive. Every time I adjust the browser window, the banner is cut off. 

I currently only have a media query for iPhone X, so I'm not sure why it's not responding to browser window size like the rest of the website.

Can someone take a look and tell me what I did wrong?

chesapeakeheartland.org

Pass: CH2020

 

 

Edited by jrc623
updated question

Share this post


Link to post
On 6/29/2020 at 4:24 PM, samasplen said:

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
	min-height: 40vh !important;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...