Jump to content

Resize one specific image for responsive website?

Recommended Posts

Certain images appear very large when viewed on a mobile device (stretched over full mobile screen). When viewed on computer they are the correct size.

I’ve tried several CSS codes, but unfortunately I’m not skilled enough.

Can anyone help me with writing one? So how can you change the size limit for one specific image?

Thanks so much!

Link to comment
  • Replies 8
  • Views 12.2k
  • Created
  • Last Reply

Hola, any address to see this bug alive.

Br, Marko

Hi Guys! I have kind of long long developer career from Nokia mobile phones (10 years).. As an hobby a have build up many web sites/services/apps from front to back-end. (15 years).. Now my main job role is to be an development manager, but still keep on coding, learning, and helping companies to earn money in digital way :) I have my own company also as side, love to make digital things.. Cheers, Marko @ marko.melko@live.com

Link to comment

All Squarespace sites use a Responsive Design that includes optimization for display across different browsers and devices, including mobile devices. This means that content will automatically respond to the size of the browser window and adjust accordingly for optimal viewing.

It sounds like this is what you're referring to as Image Blocks and some Gallery designs will stack the images on mobile and display them the full container-width. For more information on mobile display and responsive design, see here.

As markomelko mentioned, if you'd like the share your site's URL, the community would be glad to take a look!

Link to comment

Hey there,

I see what you mean. Perhaps instead of using an image block, you could use a code block. That way you can have more control over the image. Try this in a code block:

<div style="width: 100%;">
<img src="http://static1.squarespace.com/static/54f9213fe4b0e61576060e38/t/55601193e4b0658666c2169a/1432359498738/fsc-logo-green.jpg?format=100w" style="width: 50px; float: right;">


The float on the image was causing it to look like it was on the same line as the header that follows it:

alt text

Replace the above code with this new iteration:

  <div style="width: 100%; text-align: right">
   <img src="http://static1.squarespace.com/static/54f9213fe4b0e61576060e38/t/55601193e4b0658666c2169a/1432359498738/fsc-logo-green.jpg?format=100w" style="width: 50px;">

Link to comment

I see what you mean. As this is an Image Block, it will naturally stack under the text when viewed on a mobile device. The Spacer Block that you've added to the left of the image does not apply to the mobile display.

What you could do to maintain this small "FSC" image is create an image file replicating this current configuration. Therefore, you'd create an image with a thin, wide white (or transparent) bar to the left and this small "FSC" image to the right. Save this file and then upload this into an Image Block.

As this would be the file's natural display, the "FSC" image would then maintain its size (small) on mobile.

Link to comment
  • 1 year later...


This topic is now archived and is closed to further replies.

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