Joe Barefoot 32 Share Posted October 1, 2012 (edited) I'm wondering if anybody knows a way to control the size of images in an Image Block when displayed on mobile devices. To be specific, the images are (on large browsers) small mugshots of members of our team. They're inserted on the page one after another and on mobile devices they are scaled to the width of the screen. I'm hoping to make them a bit smaller than this as on iPads and other tablets they become rather intimidating. Here's the page in question if it's useful: http://www.superhet.net/about/ Thanks Edited July 6, 2016 by acalvo retag Scoobie 1 Assistant at Superhet. Link to post
foleyatwork 8,727 Solution Share Posted October 1, 2012 This isn't a native Squarespace 6 option, but if you're handy with coding you could make it happen in developer mode. Just use a media query to target screens below a certain size; it might look something like this: @media screen and (max-device-width: 480px) { img { float: left; width: 200px; } } Here's a really great article on using media queries if you'd like to look into this a bit more. http://www.alistapart.com/articles/responsive-web-design/ Developer Evangelist at Squarespace. Link to post
Joe Barefoot 32 Author Share Posted October 3, 2012 Thank you for your suggestion. Unfortunately it doesn't seem to work! I don't understand why as your CSS seems to make perfect sense. I have read about media queries before but never used one. I assume Squarespace already uses this sort of thing out of the box? Is it possible something could be conflicting with this code? I have had to use '!important' before to override stubborn Squarespace code. I tried this sort of thing to get around stubborn code: @media screen and (max-device-width: 480px) { #block-8253851efba5ab80d69a img { float: left; width: 100px !important; }} Assistant at Superhet. Link to post
foleyatwork 8,727 Share Posted October 3, 2012 Hi Joe, I actually didn't think that exact code would work, it was more like a suggestions to steer you in the right direction. It's definitely possible some of your theme's code is overriding this rule. You should get a little more specific with your CSS declaration to make sure that doesn't happen - try giving the images an ID and then using that to target the images in the CSS. -Kevin Developer Evangelist at Squarespace. Link to post
brianyhearne 469 Share Posted April 4, 2014 Hi Kevin, So how would you go about giving images an ID? Link to post
Guest Share Posted July 7, 2015 I FOUND IT!!!!! I had the same problem and found NO solution that worked for me! Finally a found a solution myself! instead of using coding, just adapt the image. f.ex. if you had an image 400400 blown up on mobile devices, but perfect on desktop, you add white space to both sides of the images (not within squarespace but with other programs). the result is f.ex. a 800400 image which will result in a PERFECT mobile image. (de dimensions are an example of course) the images will look smaller on mobile, because the site is using the white space from both sides of the image! if you do it right, i'm sure it will work for you as well! Link to post
Scoobie 16,467 Share Posted July 7, 2015 Can you post a link? I'm struggling to understand this Link to post
Hazel 74 Share Posted June 24, 2016 Duh! Thank you henrybouci! It worked like a charm!! I added the white border + resized the photo a little and it's now showing at the size that I wanted. For some reason I thought Squarespace would overrule any resizing but no, it was as simple as that. The white border was fundamental though. Thanks again! nestorlaz 1 Link to post
nestorlaz 0 Share Posted December 29, 2019 Hey! I have the same issue. Is it possible to share a link or explain how you did it? Thank you in advance! Link to post
shansoloe33 0 Share Posted June 10, 2020 My new website created the same issue in media library. I'm thinking to change the CMS to Squrespace. I'm currently using the wordpress. You can check my website https://woodhutt.com/ Link to post
tuanphan 9,604 Share Posted June 14, 2020 On 12/29/2019 at 11:04 PM, nestorlaz said: Hey! I have the same issue. Is it possible to share a link or explain how you did it? Thank you in advance If you share link to your site, We can check easier. Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment