Make first image in Image Gallery Block go full width

Hi all,

I'm wondering if you could help me with some css that would force the first image in a gallery block to display the full width of the block?  Ideally, this would be for any gallery block that is placed in this "Portfolio" blog collection.

(I know I could simply put a regular image block on top of the gallery block to create this, but I want to keep all of the images in the gallery block so that you can page through them while in lightbox mode.)

Website: https://pumpkin-orange-3ld6.squarespace.com/portfolio/blog-post-title-one-2g2bd-5723b-4hfd4
Password: Real2023

Thank you!

Add to Page Header

<style>
  body[class*="type-blog"].view-item div.gallery-block .slide:first-child {
    width: 100% !important;
}
</style>

Thanks so much @tuanphan.  This almost works perfectly!  I've attached a screenshot - it looks like it's not treating the second image as being on a new row, so the third image isn't flowing behind it.  Am wondering if there is a way for it to recognize that the second image is its own row and the third image should be flowing behind it?  Let me know what you think.

Thanks so much @tuanphan!  Yes, I'm using the same grid settings for each page, so this works beautifully.  Can't thank you enough!

Hallo

This is my first time trying out Squarespace and I have a similar problem. I want the first image in this strip gallery section to be full width. The code above doesn't seem like a solution in my case. If a fix is possible I would like to apply it to specific gallery sections. 

Can I share the site URL if it is still in trial?

Help will be much appreciated!

14 hours ago, frederikjacobus said:

Hallo

This is my first time trying out Squarespace and I have a similar problem. I want the first image in this strip gallery section to be full width. The code above doesn't seem like a solution in my case. If a fix is possible I would like to apply it to specific gallery sections. 

Can I share the site URL if it is still in trial?

Help will be much appreciated!

 

 

Can you share link to this page? I can check easier

1 hour ago, tuanphan said:

Can you share link to this page? I can check easier

Thanks for your help! In trial mode it doesn't seem as if a direct URL is available. 

https://harpsichord-koala-maf4.squarespace.com/config/

ORIGINALS > _ / Poster for an Extinction / 2014-6 

Hopefully that will go to the page. 

17 hours ago, frederikjacobus said:

Thanks for your help! In trial mode it doesn't seem as if a direct URL is available. 

https://harpsichord-koala-maf4.squarespace.com/config/

ORIGINALS > _ / Poster for an Extinction / 2014-6 

Hopefully that will go to the page. 

The site is private. You can follow this to share url

5 hours ago, tuanphan said:

The site is private. You can follow this to share url

 

Thanks @tuanphan. Hope I got this right.

Site: https://harpsichord-koala-maf4.squarespace.com/config/pages

Password: FEsite023

16 minutes ago, frederikjacobus said:

 

Thanks @tuanphan. Hope I got this right.

Site: https://harpsichord-koala-maf4.squarespace.com/config/pages

Password: FEsite023

Did you solve it? It already fine to me

https://harpsichord-koala-maf4.squarespace.com/poster-for-an-extinction?noredirect

Or maybe problem appears on large screen only

I tried some code but can't achieve this. You can consider adding 2 Strips, top Strips with 1 image only to achieve your first image fullwidth

It is a larger screen issue like you said. I have considered the two strips option but wanted the viewer to be able to click through all images in the same light box. 

Thanks very much for trying. Maybe I can come up with a two strip workaround that makes sense.