Double block on portfolio page

Site URL: https://www.cindyho.design/

Hi there, I'd like to implement two blocks side-by-side for each of my work/case study in the Portfolio page. I've attached an example image here. Can you please help?

13 hours ago, CindyHo said:

Site URL: https://www.cindyho.design/

Hi there, I'd like to implement two blocks side-by-side for each of my work/case study in the Portfolio page. I've attached an example image here. Can you please help?

I think we can use 2 image blocks and use some Css code to remove the padding with the page

Hi bangank36! Unfortunately the portfolio page currently does not allow for me to add image or text or any blocks of that kind for that matter. The only customisation I can do is the layout (I currently have input some CSS to make it a one-case study vertical line).

@tuanphan Are you able to assist please? Many thanks!

On 8/8/2022 at 9:24 AM, CindyHo said:

Site URL: https://www.cindyho.design/

Hi there, I'd like to implement two blocks side-by-side for each of my work/case study in the Portfolio page. I've attached an example image here. Can you please help?

You mean do this on Portfolio List Page or Sub Pages?

@tuanphanOn the Portfolio list page :)

On 8/10/2022 at 8:59 PM, tuanphan said:

You mean do this on Portfolio List Page or Sub Pages?

Add to Design > Custom CSS

div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    padding: 0 !important;
    grid-gap: 0px !important;
}
div#gridThumbs h3 {
    padding-left: 20px;
}

@tuanphan Thank you, but I didn't describe the issue clearly. I wanted a wide frame for each item of work in the portfolio page, not have two work items side by side. 🙂

That said, I worked around it by doing the following:

1. Making a new feature image that is wide
2. Changing the left-and-right paddings in the CSS code.

div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    padding-left: 18vw;
    padding-right: 18vw;
}

3. I also "hacked" the height by adjusting the height % where the code is for the image hover.

It looks like how I intend it to now, but there are two remaining issues:

1. I'd like to clean up the code because I don't want to do an image hover anymore now that I'm applying this style. Currently it's a hack because I've uploaded the same image in the image hover code. How do I remove the image hover code while still maintaining the shorter height?
2. The portfolio title is now very far away from the image, I think because I've specified height by a lower % (70%). Is there a way I can remove the need for a title outside the image box? (Squarespace won't let me save without a title input)

#1. I don't see hover effect. Which page are you referring to?

https://www.cindyho.design/work

#2. No title show here

https://www.cindyho.design/work

Hi @tuanphan, I got a friend to help me look at the code and he helped me remove the hover code and the project title. This is what I have in CSS:
 

div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr));
    padding-left: 18vw;
    padding-right: 18vw;
}

div#gridThumbs .portfolio-text {
  display: none;
  margin: 0;
}

a.grid-item .grid-image .grid-image-inner-wrapper img {
  object-fit: contain !important;
}

There is still the issue of sizing. Currently the image is at 70% of the parent element. You should be able to see a clickable area below each image. How do I resize the element so that it is exactly the size of the image i have on my portfolio page? https://www.cindyho.design/work

Hi @tuanphan - all resolved now, thank you.