Center Image Gallery Contents

This is nonsense that Squarespace can't provide the option to center images in any of its galleries. Looking for another web hosting site, that's for sure. Also, displaying titles and captions in Lightbox but not before. Also an impossibility on Squarespace—not a web development platform for creatives, IMHO.      

Hi @tuanphan we are having a similar issue as mentioned above. We were able to add the code below to the site but it affected all of the image galleries, rather than just the one on the "Our Team" page which is the one we want it affect (We noticed this on mobile only - The desktop view is displaying correctly though.) 

Can you also help us to make sure the mobile view displays everyone correctly as well? Right now they are running off the page on the mobile view. 

body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}

URL: https://martini-i3-may.squarespace.com/our-team

Password: DoveLove2022!

Thank you!

On 9/28/2022 at 11:46 PM, MinerMan2022 said:

Hi @tuanphan we are having a similar issue as mentioned above. We were able to add the code below to the site but it affected all of the image galleries, rather than just the one on the "Our Team" page which is the one we want it affect (We noticed this on mobile only - The desktop view is displaying correctly though.) 

Can you also help us to make sure the mobile view displays everyone correctly as well? Right now they are running off the page on the mobile view. 

body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}

URL: https://martini-i3-may.squarespace.com/our-team

Password: DoveLove2022!

Thank you!

Mobile is fine to me. Can you take a screenshot?

With above code, you can change it to this to make it runs on desktop only

@media screen and (min-width:768px) {
body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}
}

 

On 9/29/2022 at 10:10 PM, tuanphan said:

Mobile is fine to me. Can you take a screenshot?

With above code, you can change it to this to make it runs on desktop only

@media screen and (min-width:768px) {
body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}
}

 

Hi @tuanphan I added the code but the mobile view is still not displaying correctly. See screenshot below. 

On 9/30/2022 at 10:10 AM, tuanphan said:

Mobile is fine to me. Can you take a screenshot?

With above code, you can change it to this to make it runs on desktop only

@media screen and (min-width:768px) {
body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}
}

 

I meant you remove your code, & add my code, this code will run on desktop only.

Current I see you still use below code, the code affects all devices

body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center
}

body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper {
    width: 400px;
    height: auto
}

 

Hi @tuanphan I tried your code above as well and got the same result. On mobile the gallery is still cut off. Am I miss understanding something? Let me know. Thank you!

On 10/11/2022 at 2:55 AM, MinerMan2022 said:

Hi @tuanphan I tried your code above as well and got the same result. On mobile the gallery is still cut off. Am I miss understanding something? Let me know. Thank you!

Can you send all current code in Custom CSS?

On 10/12/2022 at 7:32 AM, tuanphan said:

Can you send all current code in Custom CSS?

Sure thing. Please see below. 
 

//.gallery-fullscreen-slideshow[data-transition="fade"]
.gallery-fullscreen-slideshow-item[data-active="true"]
  .gallery-fullscreen-slideshow-item-src {
  transition: opacity 1400ms ease-in-out !important;
  -webkit-transition: opacity 1400ms ease-in-out !important;
  -ms-transition: opacity 1400ms ease-in-out !important;
  -moz-transition: opacity 1400ms ease-in-out !important;
  -o-transition: opacity 1400ms ease-in-out !important;
}

[id*="img-hover"] {
  width: 100% !important;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center top;
}

/*Poster Image Hover Effect */
.gallery-grid:hover .image-overlay {
  background: blue !important;
  opacity: 0.8;
  transition: 2s;
}

.gallery-grid .image-overlay {
  opacity: 0;
  transition: 2s;
}

/*Image Replacement Mobile*/
@media screen and (min-width: 641px) {
  #block-yui_3_17_2_1_1663703993306_10826 {
    display: none;
  }
}

@media screen and (max-width: 641px) {
  #block-yui_3_17_2_1_1663703993306_8469,
  #block-0c68a2fea174830212ac {
    display: none;
  }
}

#yui_3_17_2_1_1664293275526_856 {
  color: #71acb6 !important;
}

/*Overlay Menu*/
.heaver-nav {
  background: #71acb6 !important;
}

.header-title-logo a {
  color: white;
}

/*Awards & Rec Blocks Replacement Mobile*/
@media screen and (min-width: 641px) {
  #block-yui_3_17_2_1_1664382186561_3699 {
    display: none;
  }
}

@media screen and (max-width: 641px) {
  #block-yui_3_17_2_1_1664298812838_201675,
  #block-yui_3_17_2_1_1664298812838_206454 {
    display: none;
  }
}

body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
  display: flex;
  justify-content: center;
}

body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper {
  width: 400px;
  height: auto;
}

.image-block-wrapper {
  border-radius: 0px !important;
}

/*Post Image Correction Border radius*/
.summary-thumbnail {
  border-radius: 0px !important;
}

/*Bottom Navigation Image Correction Border radius*/
.sqs-block-image-figure {
  border-radius: 0px !important;
}

/*Bottom Navigation Text Color Correction*/
.sqm-image-boxes .sqs-block-image .design-layout-poster .image-title-h3 {
  font-color: #71acb6 !important;
}
h1 {
  font-family: "Proxima Nova" !important;
}

h2 {
  font-family: "Proxima Nova" !important;
}

h3 {
  font-family: "Proxima Nova" !important;
}

h4 {
  font-family: "Proxima Nova" !important;
}

p {
  font-family: "Adobe Garamound Pro" !important;
}

.summary-title {
  font-family: "Proxima Nova" !important;
}

.gallery-caption-content {
  font-family: "Proxima Nova" !important;
  color: #3f676d;
}

.sqm-links-tabs .tabs-title h2.sm-active span:after {
  content: "";
  width: 30px;
  height: 8px;
  background: url(https://static1.squarespace.com/static/627a07de3945684c806adb72/t/633c7d9b3084aa238280bc0b/1664908699263/teal-arrow-right-hover.png)
    no-repeat;
  background-size: contain;
  position: absolute;
  top: 14px;
  right: 10px;
}

.sqmuse-burger-menu.show-burger.menu .header-title-logo img {
  filter: none !important;
}

.sqm-image-boxes .sqs-block-image .design-layout-poster .image-title h3 {
  color: #71acb6 !important;
}

.sqm-image-boxes
  .sqs-block-image
  .design-layout-poster
  .image-title-wrapper
  + .image-subtitle-wrapper
  .image-subtitle
  h4 {
  color: #3f676d;
}

.sqm-image-boxes .image-card-wrapper:after {
  content: "";
  width: 30px;
  height: 8px;
  background: url(https://static1.squarespace.com/static/627a07de3945684c806adb72/t/633c7d9b3084aa238280bc0b/1664908699263/teal-arrow-right-hover.png)
    no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 35px;
  transform: translateX(-50%);
}
.sqm-image-boxes .sqs-block-image:hover .image-card-wrapper:after {
    filter: invert(100%);
}

.view-list .image-wrapper {
  border-radius: 0px !important;
}

.header-title-logo img {
  filter: none !important;
}

.sqmuse-burger-menu .header-nav {
  background: #f7f7f7 !important;
}

body {
  background-color: #f7f7f7 !important;
}

.sqmuse-burger-menu .sm-burger-menu-email {
  font-family: "proxima-nova" !important;
  font-weight: 600px !important;
}

.header-menu-nav-item,
.header-nav-wrapper a {
  font-family: "proxima-nova" !important;
  color: #3f676d !important;
  font-weight: 600px !important;
}

.sqm-cases-section.page-section > .content-wrapper {
  border-bottom: none !important;
}
.sqmuse-burger-menu .burger-close {
  left: unset !important;
}
.sqm-image-boxes
  .sqs-block-image:hover
  .design-layout-poster
  .image-subtitle
  h4,
.sqm-image-boxes .sqs-block-image:hover .design-layout-poster .image-title h3 {
  color: #fff !important;
}
.sqm-image-boxes .sqs-block-image .design-layout-poster .image-title h3 {
  color: #71acb6 !important;
}
.sqm-links-tabs .sqs-col-7 {
  background: rgba(229,224,217,.7)!important;
  padding: 25px 10px!important;
  box-sizing:border-box;
  z-index: 3;
}
.sqm-links-tabs .tabs-title h2 {
  color: #3f676d !important;
}
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
  border-right-style: solid !important;
  border-left-style: solid !important;
  border-width: 1px !important;
  border-color: #3f676d !important;
}
// Tuan Phan Code
@media screen and (min-width:768px) {
body#collection-632a043689cd704b54cf7f13 .gallery-grid-wrapper {
    display: flex;
    justify-content: center;
body#collection-632a043689cd704b54cf7f13 .gallery-grid-item-wrapper{
    width: 400px;
      height: auto;
}
  }
}
//Hide Hamburger Menu
@media screen and (min-width:641px) {
a#desktopMenu {
    visibility: hidden !important;
}

}
.sqm-image-boxes .sqs-layout:after {
    content: "";
    width: 100%;
    height: 0px !important;
    background: #000;
    position: absolute;
    bottom: 95px;
    left: 0;
}