lightbox SqSp 7.1FE I'd like CSS control over the size of the Lightbox image on desktop and smartphone

My gallery lightbox images are opening too large on desktop view.

1. I'd like to have control over the image size and limit the size to about 35%-50% in desktop view, and… 

2. Keep the size as is (100%) on smartphone view. www.taitdesign.com*

I've explored CSS such as this for the desktop, but it's not working:

/* Lightbox max size */
.gallery-lightbox-item img {
  width: 50% !important;
  height: auto !important;
}

Can you guide me in the right direction? Thanks!

*At the time of this post I'm having DNS issues and the taitdesign.com site may not show up on your desktop but should on your smartphone. It does on mine. It's confusing. I will address this issue after coffee. About 16 hours ago I swapped my old 7.0 site for a new 7.1 FE site. The site worked for about two hours. Any help would this issue would also be appreciated. Just tell me where to look. I've talked to my domain provider and that was useless.

37 minutes ago, TaitDesign said:

My gallery lightbox images are opening too large on desktop view.

1. I'd like to have control over the image size and limit the size to about 35%-50% in desktop view, and… 

2. Keep the size as is (100%) on smartphone view. www.taitdesign.com*

I've explored CSS such as this for the desktop, but it's not working:

/* Lightbox max size */
.gallery-lightbox-item img {
  width: 50% !important;
  height: auto !important;
}

Can you guide me in the right direction? Thanks!

*At the time of this post I'm having DNS issues and the taitdesign.com site may not show up on your desktop but should on your smartphone. It does on mine. It's confusing. I will address this issue after coffee. About 16 hours ago I swapped my old 7.0 site for a new 7.1 FE site. The site worked for about two hours. Any help would this issue would also be appreciated. Just tell me where to look. I've talked to my domain provider and that was useless.

You can try this in custom css

@media only screen and (min-width: 768px) {
  .sqs-lightbox-slide img.thumb-image.loaded {
    width: 50% !important;
    height: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}
  .sqs-lightbox-slide .sqs-lightbox-meta {
        padding: 0 25%;
  }
}

The image caption's position is generated programmatically so I let it stays where it is now with slightly change on the padding to fit the cropped image dimension

Thank you. That works perfectly. (My code wasn't even close.) 

Now I have to reduce the space between the image and the Title text, and I'd like the title to 'show' on the smartphone. (I can likely handle that.)

One question: Are you able to see my site on your desktop? My next task is to readdress the "DNS_PROBE_FINISHED_NXDOMAIN" error that I and others are getting in all browsers, PC and Mac, on desktop.

2 minutes ago, TaitDesign said:

Thank you. That works perfectly. (My code wasn't even close.) 

Now I have to reduce the space between the image and the Title text, and I'd like the title to 'show' on the smartphone. (I can likely handle that.)

One question: Are you able to see my site on your desktop? My next task is to readdress the "DNS_PROBE_FINISHED_NXDOMAIN" error that I and others are getting in all browsers, PC and Mac, on desktop.

I can see your site on desktop, the screenshot is taken on Chrome desktop on my Macboom