How can I make the portfolio grid 7.1 with 1 column and the text left of the image?

Hi,

I was wondering if it's possible to create this kind of layout with the portfolio grid:
https://youth.studio/work/

I already got it to display the project as 1 column using this custom css (But it seems a bit buggy. It randomly jumps back to 2 columns):
/* change portfolio grid to 1 column */
div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}

Is it possible to get the text on the left of the image, something of a divider and then the image on the right?

Thanks in advance!

(My site isn't published yet so I don't know how to share it here :-(

19 hours ago, iamRob said:

Hi,

I was wondering if it's possible to create this kind of layout with the portfolio grid:
https://youth.studio/work/

I already got it to display the project as 1 column using this custom css (But it seems a bit buggy. It randomly jumps back to 2 columns):
/* change portfolio grid to 1 column */
div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}

Is it possible to get the text on the left of the image, something of a divider and then the image on the right?

Thanks in advance!

(My site isn't published yet so I don't know how to share it here :-(

Hi. You can setup password & share url.

19 hours ago, iamRob said:

Hi,

I was wondering if it's possible to create this kind of layout with the portfolio grid:
https://youth.studio/work/

I already got it to display the project as 1 column using this custom css (But it seems a bit buggy. It randomly jumps back to 2 columns):
/* change portfolio grid to 1 column */
div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}

Is it possible to get the text on the left of the image, something of a divider and then the image on the right?

Thanks in advance!

(My site isn't published yet so I don't know how to share it here :-(

Hi. You can setup password & share url.

Hi Tuanphan,

I figured out how to share the url 🙂

https://grasshopper-flamingo-5a5p.squarespace.com/fotostyling

PW: TryMe

On 1/24/2021 at 1:13 AM, iamRob said:

Hi Tuanphan,

I figured out how to share the url 🙂

https://grasshopper-flamingo-5a5p.squarespace.com/fotostyling

PW: TryMe

 

 

Hi.

Hi Tuanphan,

Something went wrong with my trial at Squarespace. They fixed it yesterday so everything is working again.

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
}
a.grid-item {
    flex-direction: row-reverse !important;
    margin-bottom: 50px;
    align-items: flex-start !important;
}
.portfolio-text {
    margin-top: 0 !important;
}
.grid-image {
    width: 50% !important;
}
.portfolio-text {
    text-align: left !important;
    width: 100%;
}
}

Hi @tuanphan

This worked like a charm! I just tweaked the measurements a bit to get the right look & feel.

Thank you! This was really helpful and much appreciated