How can I apply this CSS to desktop only?

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

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

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.

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

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.