jdlsfc Posted September 13, 2014 Posted September 13, 2014 Two of my galleries have medium format (square) photographs which don’t display well in Flatiron galleries. They are way too large so that viewers have to scroll in order to see the entire image like here: http://www.jlevinsonphoto.com/#/pushedout/. I edited the CSS to make them appear smaller like in this gallery: http://www.jlevinsonphoto.com/#/afghanistan/ The CSS I added screwed up the mobile version so that the images appear as small thumbnails. Any idea how I can make my CSS changes ONLY apply to the desktop version? This is the code I used to change the gallery: #collection-53fceadfe4b0b801964b0e66 [data-dynamic-href="/afghanistan/"] .gallery{ margin: 52px 135px 50px 475px; }
jdlsfc Posted September 13, 2014 Author Posted September 13, 2014 If anyone else is experiencing a similar problem Squarespace support offered this solution: Place the square photos on a white (or whatever color your gallery is) rectangular canvas in Photoshop. Then upload the rectangular file and it will display appropriately in your gallery. It's tedious but it works well.
jgennick Posted September 14, 2014 Posted September 14, 2014 That's an interesting solution they came up with. Not sure I'd have ever been creative enough to come up with it. It's a clever hack. I like it. Tedious maybe, but simple and elegant. BTW, it is possible to write CSS to affect only the desktop view. You would want to read up on what are called "media queries". I cover them in my book, but it's easy enough to find information about them on the web too. Jonathan Gennick, Author: Learn CSS for Squarespace
e2astudio Posted September 15, 2014 Posted September 15, 2014 Wrapping your CSS in a media query should do the trick. Use something like this instead: @media screen and (min-width: 768px) { #collection-53fceadfe4b0b801964b0e66 [data-dynamic-href="/afghanistan/"] .gallery { margin: 52px 135px 50px 475px; } } The media query basically says "When the viewport is larger than 768 pixels, change these margins in the gallery on this page."
e2astudio Posted September 15, 2014 Posted September 15, 2014 @JonathanGennick Thank you for participating in Answers. I know you'll be able to help a lot of people with your knowledge of CSS. But, please don't try to 'bait' people into buying your book. If you want to help, answer the question with a custom CSS snippet like I have done on this thread.
jgennick Posted September 15, 2014 Posted September 15, 2014 Sorry Eric. I'll avoid posting when I can't supply a solution. I was in a rush yesterday and didn't have time to sort one out. I guess it would have been better not to have posted. I did though, like the hack of placing the square images onto rectangular backgrounds. I am sincere in what I said about it. It's a clever approach.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.