images on mobile and tablets are too cropped

Site URL: https://raspberry-ladybug-nhm8.squarespace.com/config/pages

Hello,

I'm trying to figure out  if there is a way to resize some of the photos for the mobile version and tablet. My homepage looks terrible on these two versions. and the flower doesn't look so great either. the images are too cropped. How can i have a smaller version of the images that fits fully

Thank you.

Hi. Your site is private. Can you setup password & share url again? We can check easier

Hello,

Sorry about that. I made the change  (pass: abc123)

here's the Url: https://raspberry-ladybug-nhm8.squarespace.com/config/

Thank you

On 7/17/2021 at 12:47 AM, Val1209 said:

Hello,

Sorry about that. I made the change  (pass: abc123)

here's the Url: https://raspberry-ladybug-nhm8.squarespace.com/config/

 

Thank you

Resize & make text under banner or over banner. If over banner, it will overflow from image. What do you think?

Do you mean resizing for the whole site or just for the mobile version?

To be honest, I'm not sure how to resize it. I just uploaded the image but I wouldn't know what size to use for the mobile version.

I don't know what it would look like if the copy was over with overflow. 

I like the version you screen shot but I may want to play round with the color of the background where the copy is to figure out what's better than black.

Ugh! I was hoping it would be a simple code to inject in the custom CSS. This seems beyond my beginning skills level.

On 7/18/2021 at 10:41 AM, Val1209 said:

Do you mean resizing for the whole site or just for the mobile version?

To be honest, I'm not sure how to resize it. I just uploaded the image but I wouldn't know what size to use for the mobile version.

I don't know what it would look like if the copy was over with overflow. 

I like the version you screen shot but I may want to play round with the color of the background where the copy is to figure out what's better than black.

Ugh! I was hoping it would be a simple code to inject in the custom CSS. This seems beyond my beginning skills level.

Mobile version

I used the code to get the screenshot. But, as you can see, if the text is on the image, the text is too much, it will overflow, so the best solution is the image above, the text below (mobile only). You can change black background, of course.

What do you think? If you want this, I will check it again & give the code

Hi! I understand now. I like this option. I'm just not sure about the black background. How can I choose another color maybe? is that something I could change easily in the code? And maybe same thing for the color of the font. Should I try to create it more or less and then give the colors I would prefer for the background and font? Thank you so much for your help again.

Actually, Could we keep the background white and use a dark grey font/ off black for the font of the title and subtitle?

I'm using the following font color for the site: hsla(194, 24%, 14%, 0.77)

Thanks!

On 7/21/2021 at 1:10 AM, Val1209 said:

Actually, Could we keep the background white and use a dark grey font/ off black for the font of the title and subtitle?

I'm using the following font color for the site: hsla(194, 24%, 14%, 0.77)

 

Thanks!

Add to Design > Custom CSS > Then save & Reload the site

/* Mobile-resize banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#new-page-3 {
    min-height: unset !important;
    height: 40vh;
}
}

Thank you, this is really helpful. A couple more things. is there a way for me to adjust the size of the font  on the headline and sub head on the header page? it now looks too big compared to this image.

Also, How can I adjust the image on the tablet version as the pb is still there (Image is too cropped)?

Finally, is there a way to remove the black trim above and below the header image?

Thank you again

With headline/subhead, use this new code

/* Mobile-resize banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
section#new-page-3 {
    min-height: unset !important;
    height: 40vh;
}
section#new-page-3 h1 {
    font-size: 20px;
}
section#new-page-3 h3 {
    font-size: 30px;
}
}

With tablet, use this

/* Mobile-resize banner */
@media screen and (max-width:900px) and (min-width:641px) {
body.homepage .Parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#new-page-3 {
    min-height: unset !important;
    height: 50vh;
}
section#new-page-3 h1 {
    font-size: 20px;
}
section#new-page-3 h3 {
    font-size: 30px;
}
}

Can you take a screenshot of black trim?

Thank you!! the image looks great. Now I have another issue with the size of the logo on the tablet! Ugh! is it possible to adjust the size manually just for the tablet version? Here are screenshots of both the tablet and the trim on the mobile version.

I'm also wondering if it's possible to remove the sub headline on the mobile version as I think it feels too crowded.

Thank you so much.

On 7/23/2021 at 1:17 PM, Val1209 said:

Thank you!! the image looks great. Now I have another issue with the size of the logo on the tablet! Ugh! is it possible to adjust the size manually just for the tablet version? Here are screenshots of both the tablet and the trim on the mobile version.

 

I'm also wondering if it's possible to remove the sub headline on the mobile version as I think it feels too crowded.

 

Thank you so much.

Logo on mobile or tablet?? If mobile, use this code

/* logo size mobile */
@media screen and (max-width:767px) {
img.Mobile-bar-branding-logo {
    width: 100px;
}
}

With black trim on mobile, use this new code for mobile

/* resize mobile banner */
@media screen and (max-width: 640px) {
    body.homepage .Parallax-item img {
        width:100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
    }
    body.homepage .Parallax-item figure {
        transform: unset !important;
    }
    section#new-page-3 {
        min-height: unset !important;
        height: 40vh
    }

    section#new-page-3 h1 {
        font-size: 30px;
        margin-top: 70px;
    }

    div#block-yui_3_17_2_1_1625672004772_2202 {
      display: none;
    }
}

Thank you.

So, I inserted the new code for the black trim and now the bar is thicker at the bottom on the mobile version. 

Also, the logo issue is actually on the tablet version, not the Mobile one. See photo attached.

5 hours ago, Val1209 said:

Thank you.

So, I inserted the new code for the black trim and now the bar is thicker at the bottom on the mobile version. 

Also, the logo issue is actually on the tablet version, not the Mobile one. See photo attached. 454.03 kB · 0 downloads

 

try changing 40vh to 35vh then save & reload the site

That solved the black trim problem. Thank you!

What about the logo size on the tablet version ( see picture in last message) ? The code you sent me was for the mobile and int doesn't fix the size f the logo on the tablet. Hopefully it won't create another issue trying to adjust it.

On 7/26/2021 at 5:32 AM, Val1209 said:

That solved the black trim problem. Thank you!

What about the logo size on the tablet version ( see picture in last message) ? The code you sent me was for the mobile and int doesn't fix the size f the logo on the tablet. Hopefully it won't create another issue trying to adjust it.

 

 

Use this code

/* tablet header logo size */
@media screen and (max-width:900px) and (min-width:641px) {
img.Header-branding-logo {
    max-width: 150px;
}
}

Thank you so much! I'm so grateful for all your help. We solved everything.