Jump to content

Equally sized image blocks and proper scaling when resizing window

Go to solution Solved by Web_Solutions,

Recommended Posts

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

c86bcd82db638416d5e20c6445d286d3.jpg

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

image.thumb.png.9be83117eab78f678ab57222bbbbc756.pngWith 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, bangank36 said:

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

image.thumb.png.9be83117eab78f678ab57222bbbbc756.pngWith 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:

454d01646259653f3f9fa90cf6d031b7.png
And once it hits mobile, it changes to this (this already happens):

e72dc529744c04253700d63b08aaaf54.png

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

Let me know if this clarifies everything!

Edited by thefakedaniel
Link to comment

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

 

image.thumb.png.0848ebc49b871afb0de37c7834f4876a.pngI 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
13 hours ago, bangank36 said:

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

 

image.thumb.png.0848ebc49b871afb0de37c7834f4876a.pngI 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.

Edited by thefakedaniel
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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;
      max-width: 100% !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;
        }
      }
    }
  }
}

 

Edited by Web_Solutions
Link to comment
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!

Link to comment
2 hours ago, Web_Solutions said:

Sure

 

Awesome, it worked.

Although I think the text isn't exactly centered: image.thumb.png.17c5012f75f486509175502b358138df.png

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;

 

Edited by thefakedaniel
Link to comment
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.

Screenshot_164.png

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!

Edited by thefakedaniel
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.