Resize one specific image for responsive website?

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!

Hola, any address to see this bug alive.

Br, Marko

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!

Hi!

That is exactly the problem.

Here is the URL of one of the pages where this resizing is problematic when viewed on a mobile device: http://www.jaswig.com/products/It's the "FSC" logo that becomes much too large.

Thanks!

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;">
</div> 

EDIT:

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

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;">
   </div>

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.

That works! Thanks so much!

Smart thinking! Thanks!

I'm having a similar issue. http://lusciouslumberjack.com/

I believe this code is likely a start, but I have a carousel of several rotating images at the top.

I'm wondering if I can keep the large banner images on desktop, and make smaller ones for mobile.

Any help would be fantastic.