Equally sized image blocks and proper scaling when resizing window

Site URL: https://bonjrmusic.com/store-select

Hi,

Could someone help me with the design of this page?

I would like to have all the image blocks be the same dimensions as well as have the elements adapt to different window sizes.

Appreciate any help I can get!

Best,
Daniel

23 hours ago, thefakedaniel said:

Site URL: https://bonjrmusic.com/store-select

Hi,

Could someone help me with the design of this page?

I would like to have all the image blocks be the same dimensions as well as have the elements adapt to different window sizes.

Appreciate any help I can get!

Best,
Daniel

I check that the layout is the same with the breakpoint equal to 768px and larger

With the smaller breakpoint (<=767px), the layout will arrange with one column. You mean set this page the same layout when breakpoint is lower than 767px, don't you?

5 hours ago, bangank36 said:

I check that the layout is the same with the breakpoint equal to 768px and larger

With the smaller breakpoint (<=767px), the layout will arrange with one column. You mean set this page the same layout when breakpoint is lower than 767px, don't you?

Hi, thanks for getting back to me!

Basically this is what I want for every size possible before it gets to tablet/mobile:


And once it hits mobile, it changes to this (this already happens):



I'd also like every image to have equal dimensions.

Let me know if this clarifies everything!

I check that you are using the image blocks and drag them into 2 columns

I think we drag them into only one column. After that using some Css code to make items equally.

Gallery section is also a alternative solution

13 hours ago, bangank36 said:

I check that you are using the image blocks and drag them into 2 columns

 

I think we drag them into only one column. After that using some Css code to make items equally.

Gallery section is also a alternative solution

Sorry, I didn't understand what you mean. Could you clarify? And what would this CSS code look like?

Also as you see in my examples, I would like to have 2 columns and 2 rows until the screen is reduced to the point where it is forced to become 1 column and 4 rows.

On 4/6/2022 at 8:39 PM, thefakedaniel said:

Sorry, I didn't understand what you mean. Could you clarify? And what would this CSS code look like?

Also as you see in my examples, I would like to have 2 columns and 2 rows until the screen is reduced to the point where it is forced to become 1 column and 4 rows.

You mean same height?

13 hours ago, tuanphan said:

You mean same height?

I guess so, equal height & width (16:9 maybe). At the moment on the website you can see they're all different sizes and not lining up properly.

8 hours ago, Web_Solutions said:

Please see the video. You can try this way

 

[data-section-id=""] {
  .gallery-grid-item{
    overflow: hidden;
    position: relative;
    .gallery-grid-image-link:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    img{
      -webkit-filter: grayscale(80%);
      -moz-filter: grayscale(80%);
      -ms-filter: grayscale(80%);
      -o-filter: grayscale(80%);
      transition-duration: .7s;
    }
    .gallery-caption{
      opacity: 0;
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    transition-delay: 100ms;
      .gallery-caption-wrapper{
        width: 80% !important;
        height: auto !important;
        p{
          color: #fff !important;
          font-family: Work Sans;
          font-weight: 700;
          font-style: normal;
          letter-spacing: .01em;
          text-transform: none;
          text-align: center;
          line-height: 1.032;
          font-size: calc((4.5 - 1) * 1.2vw + 1rem);
        }
      }
    }
  }
  .gallery-grid-item:hover {
    img{
      -webkit-filter: grayscale(0%);
      -moz-filter: grayscale(0%);
      -ms-filter: grayscale(0%);
      -o-filter: grayscale(0%);
      transform: scale(1.13);
    }
    .gallery-caption{
      opacity: 1;
    }
  }
  @media(max-width: 767px) {
    .gallery-grid-wrapper{
      grid-template-columns: inherit !important;
    }
    .gallery-grid-item {
      img{
        -webkit-filter: grayscale(0%) !important;
        -moz-filter: grayscale(0%) !important;
        -ms-filter: grayscale(0%) !important;
        -o-filter: grayscale(0%) !important;
        transform: scale(1) !important;
      }
      .gallery-caption{
        opacity: 1;
        .gallery-caption-wrapper p{
          font-size: 40px;
        }
      }
    }
  }
}

 

 

This might be what I'm looking for. Going to try it out and mark as solved if it works out, thanks!

Sure

2 hours ago, Web_Solutions said:

Sure

 

Awesome, it worked.

Although I think the text isn't exactly centered: 

This and I'm currently looking at the code to see where I can change the font size, hopefully I can find it.

Update: I found where I can change the font size. And also added some padding to move the text more to the center... not sure why it wasn't centered for me in the first place.

padding-left:70px;

Ok so turns out the padding is actually useless because the text position appears to depend on the window/screen size:

Full-screen

Windowed

Mobile

I have update the code. I have marked that. Please add this then the caption will be exact center.

1 hour ago, Web_Solutions said:

I have update the code. I have marked that. Please add this then the caption will be exact center.

Perfect, it's working great. I just marked your post as the solution.

Do you have any suggestions on how to move content from one page to another without having to remake it? i.e. if I wanted to move the carousel I have on the 'home' page somewhere else, what would be the easiest way to do so?

But other than this question, thanks for helping me out with everything!

This option is not currently available in Squarespace

On 4/12/2022 at 6:17 AM, Web_Solutions said:

This option is not currently available in Squarespace

Gotcha, thanks!

If you're looking to help out some more, I have two other posts I made recently with no replies yet 😉

All the best!

Daniel