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

images on mobile and tablets are too cropped


Val1209

Question

  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

17 answers to this question

Recommended Posts

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

image.thumb.png.41fa433a9d157868277e9f82648bcfed.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

Link to comment
  • 0
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

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

Link to comment
  • 0

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!

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)

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.

Screen Shot 2021-07-23 at 12.15.22 AM.png

Screen Shot 2021-07-23 at 12.17.15 AM.png

Edited by Val1209
Link to comment
  • 0
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.

Screen Shot 2021-07-23 at 12.15.22 AM.png

Screen Shot 2021-07-23 at 12.17.15 AM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

 

1652703940_ScreenShot2021-07-24at9_53_34PM.thumb.png.821cfcc5c0d26eed8b3bcf2fb6a3e1de.png909578624_ScreenShot2021-07-24at9_57_41PM.thumb.png.c9f33df4d10af34e4736710d73d6c5c7.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

 

 

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...