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

Resize one specific image for responsive website?

Question

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!

Edited by Jaswig
Tidy

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1

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!

Share this post


Link to post
  • 0

Hola, any address to see this bug alive.

Br, Marko

Edited by markomelko

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

Share this post


Link to post
  • 0

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:

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

Edited by bmaass
Fixed alignment.

Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...