Mobile banners & image sizes too big

Site URL: http://www.danielleberggren.com

Hi, I've gone through and plugged in a bunch of different CSS code into the Custom CSS design based off other responses in this forum. The best performing one was this:

Quote

/* resize mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 30vh;
    margin-top: 10vh;
}
}

Which alters the top banner of my home page ONLY, not any of the other images. 

As you can see in the images, the first banner is sized correctly, but the rest on mobile are cut off. I've messed with the size and dimensions of the images, too, but that doesn't seem to help matters at all. 

Any help would be appreciated.

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="62b67cfcfd8b381bc82223eb"] {
    min-height: unset !important;
}
[data-section-id="62b6839e209a9c0e21883dd2"] {
    min-height: unset !important;
}
}

13 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="62b67cfcfd8b381bc82223eb"] {
    min-height: unset !important;
}
[data-section-id="62b6839e209a9c0e21883dd2"] {
    min-height: unset !important;
}
}

 

Thank you so much, that worked!

Actually, sorry, but it's not working on any of the other pages on the mobile version of the site, just the home page. Anything for those additional pages? 

11 hours ago, DBerggren said:

Actually, sorry, but it's not working on any of the other pages on the mobile version of the site, just the home page. Anything for those additional pages? 

Can you share link to all pages where you have problem?

5 hours ago, tuanphan said:

Can you share link to all pages where you have problem?

https://danielleberggren.com/about-me

https://danielleberggren.com/books

https://danielleberggren.com/artwork

https://danielleberggren.com/short-stories

https://danielleberggren.com/blog

https://danielleberggren.com/contact-us

All the images are showing too large in mobile on each of these pages

17 hours ago, DBerggren said:

Thank you so much, that worked!

Do Similar below code. Use this tool to find data section id.

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

@media screen and (max-width:767px) {
[data-section-id="62b67cfcfd8b381bc82223eb"] {
    min-height: unset !important;
}
[data-section-id="62b6839e209a9c0e21883dd2"] {
    min-height: unset !important;
}
}

Let me know if you still have problem.

Hi @tuanphan!

I have tried almost all of your previous suggestions from this and other threads. Nothing works for www.platonicpartnership.com

Could you help?

7 hours ago, garybooker said:

Hi @tuanphan!

I have tried almost all of your previous suggestions from this and other threads. Nothing works for www.platonicpartnership.com

Could you help?

Can you take a screenshot of banner? I don't see any banner image on homepage

On 7/11/2022 at 8:36 AM, tuanphan said:

Can you take a screenshot of banner? I don't see any banner image on homepage

I see you had helped out these two people here, I seem to have issues with banners on all pages on www.jinglepotlandscaping.com

on desktop the banners are wide and short, but they are full size square on mobile.  I’m not worried about part of the image being cut off just wanted to get hammer to a regular banner size.  Would this code you recommend above also work for me?  Would really appreciate any reply.  Thanks 

On 12/21/2022 at 8:05 AM, Jinglepot said:

I see you had helped out these two people here, I seem to have issues with banners on all pages on www.jinglepotlandscaping.com

on desktop the banners are wide and short, but they are full size square on mobile.  I’m not worried about part of the image being cut off just wanted to get hammer to a regular banner size.  Would this code you recommend above also work for me?  Would really appreciate any reply.  Thanks 

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
.banner-thumbnail-wrapper figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.banner-thumbnail-wrapper {
    padding: 0 !important;
    height: 200px !important;
}
}

8 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
.banner-thumbnail-wrapper figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.banner-thumbnail-wrapper {
    padding: 0 !important;
    height: 200px !important;
}
}

 

well now I can't remember what it looked like before but definitely sure the banners have changed, I think that extra little bit of height removed from the banner is alot better. Thank you 🙂