Jump to content

Advice: Image resizing issues on mobile devices

Recommended Posts

www.pentatonicmarketing.com

How do I resize images for display on a mobile device. My company logo renders at a very small size when viewed on a phone. The two logos displayed in the footer render at an unusually large size when viewing on a phone.

The issues does not occur when viewing on a laptop or tablet.

Any advice gratefully received - thanks

Chris

 

My website has two small logos in the footer. When viewed on a mobile device

IMG_3378.jpg

IMG_3379.jpg

Link to comment
11 hours ago, Angela.me said:

I'm having a similar issue.  The image I'm placing appears small on a desktop but renders very large on mobile. As you can see on the images below, it renders small on the desktop but rather large on mobile.

Screenshot 2022-01-12 150428.png

Screenshot_20220112-150554.png

If you share site url, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/15/2022 at 12:45 AM, Angela.me said:

Sure, but I've deleted the Partner images altogether now (Charlie Weisinger, photo, text, logos) due to non-participation.

However, the same Trusted Partner logo is at the top of the page and displays as a large image on mobile.

https://www.lossoflifeadvocates.com/san-antonio

You mean Texas & Lola images? Add to Design > Custom CSS

/* mobile antonio resize images */
@media screen and (max-width:640px) {
div#block-54b25d57d5a3da5c44c6 {
    width: 50%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1642004097030_359101 {
    width: 50%;
    margin: 0 auto;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

You mean Texas & Lola images? Add to Design > Custom CSS

/* mobile antonio resize images */
@media screen and (max-width:640px) {
div#block-54b25d57d5a3da5c44c6 {
    width: 50%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1642004097030_359101 {
    width: 50%;
    margin: 0 auto;
}
}

 

I wish I understood how to do this.  Thank you!

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.