Jump to content

How can I apply this CSS to desktop only?

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply

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.

Link to comment

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

Link to comment

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.

Link to comment

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.