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

How can I apply this CSS to desktop only?

Question

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;
}

Edited by jdlsfc
Tidy

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 1

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


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...