Jump to content

Wexley gallery lightbox too small!

Recommended Posts


The click through lightbox from the Wexley gallery only displays the image at a small size. I'm looking to find a way to make it closer to full screen to improve the impact for the viewer. I have seen the thread about hiding the header, this helps but doesn't solve the problem.

Can anyone help? I know others are looking for this answer too!

Many thanks

Link to comment
  • 1 year later...
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply
  • 1 month later...
Guest choke

hi MatthewGreat page you have!I would very much like to know how you fixed the full screen?Like the idea to use the whole window.

thanksBest regardsLars

Link to comment

You could try the below - I paid for a developer to help me with it and this is what we put in the custom CSS. May need some tweaks etc for your site.

// fix header to top #headerWrapper { position: fixed; top: 0; right: 0; left: 0; bottom: auto; background: rgba(240,242,239,0.5); padding-top: 20px; } #page { padding-top: 2PX }

// move main gallery tns down so they dont overlap the header
.collection-type-gallery .thumb-list {
   margin-top: 100px;

// when gallery lightbox is active
.collection-type-gallery.full-view {
  #topNav {
    display: none;
 #headerWrapper {
   background: transparent;

 #backToThumbs {
  font-size: 2.0em;
  top: 10px;

// keep ligthbox full width/height
.collection-type-gallery.full-view #slideshowWrapper {
 height: 90vh !important;
.sqs-gallery-design-stacked-slide img {
 width: auto !important;
 height: auto !important;
 height: 100% !important;
 max-height: 1335px !important;
 top: 50% !important;
 left: 50% !important;
 -o-transform: translateY(-50%) translateX(-50%) !important;
 -ms-transform: translateY(-50%) translateX(-50%) !important;
 -moz-transform: translateY(-50%) translateX(-50%) !important;
 -webkit-transform: translateY(-50%) translateX(-50%) !important;
 transform: translateY(-50%) translateX(-50%) !important;

#topNav nav .folder-collection .subnav {
  background-color: rgba(240,242,239,0.5) !important;
 #topNav nav .folder-collection .subnav {
  background-color: #eef0eb !important;

Link to comment


This topic is now archived and is 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.