Jump to content

How do I change the height/length of the project image in my portfolio?

Go to solution Solved by Beyondspace,

Recommended Posts

2 hours ago, squarespacer01 said:

I would like to change the size of the grid image in my portfolio projects but I can't figure out how to do it.

I can change the width by using the CSS code below but not the height of the project

.grid-image {
  width: 100% !important;

}

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/25/2022 at 1:10 AM, Beyondspace said:

Can you share your site with the protected password so I can take a look?

Hi Beyondspace,

I hope it's ok for me to just share the url below. 

https://www.pecamora.com/landscape

I want to be able to reduce the aspect ratio of each project to a custom size so I can fit more projects on the screen at the same time.

I tried using the code below but all it does is change the size of the image and not the entire project block

 

.grid-image {

padding-bottom: 50% !important;

}

 

 

Link to comment
On 11/29/2022 at 5:08 AM, squarespacer01 said:

Hi Beyondspace,

I hope it's ok for me to just share the url below. 

https://www.pecamora.com/landscape

I want to be able to reduce the aspect ratio of each project to a custom size so I can fit more projects on the screen at the same time.

I tried using the code below but all it does is change the size of the image and not the entire project block

 

.grid-image {

padding-bottom: 50% !important;

}

 

 

There is a space below the project items which is the padding bottom of portfolio section.

You can try the following Css code to remove this padding

section[data-section-id="62d4dbaac00c0965ccd6c825"] #gridThumbs {
  padding-bottom: 0;
}

Support me by pressing 👍  or marking as solution if this useful for you
 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.9968272b9d61148fc991d70214b15545.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, Beyondspace said:

There is a space below the project items which is the padding bottom of portfolio section.

You can try the following Css code to remove this padding

section[data-section-id="62d4dbaac00c0965ccd6c825"] #gridThumbs {
  padding-bottom: 0;
}

Support me by pressing 👍  or marking as solution if this useful for you
 

Thank you Beyondspace, that is very useful. But is there a way to apply this code to all my portfolio pages instead of using the specific section code?

Also did you find a way to make the height of each project smaller so I can fit more projects on the screen at once?

Thank you again for your help!

Link to comment

You can try

@media screen and (min-width: 992px) {
  div#gridThumbs {
    padding-bottom: 0;
  }
}

to remove the bottom padding

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

Try the following one to change height of each item

.tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
  padding-bottom: 100%;
}

Change the value % until it meets your need

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
15 hours ago, Beyondspace said:

Try the following one to change height of each item

.tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
  padding-bottom: 100%;
}

Change the value % until it meets your need

Thank you so much for your help, this is exactly what I was looking for! And also thank you for helping me with the bottom padding, I really appreciate that.

 

 

Link to comment
  • 10 months later...
On 11/30/2022 at 7:46 AM, Beyondspace said:
.tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
  padding-bottom: 100%;
}

Thank you very much for the code. It worked for me too. Unfortunately it also changed for the mobile version (which is normal). How is it possible to change now exclusively the mobile version? 

I'd like the mobile version to look like the picture IMG_6731

Capture d’écran 2023-10-29 à 00.11.43.png

IMG_6730.PNG

IMG_6731.PNG

Link to comment
On 10/29/2023 at 5:15 AM, JeromeD said:

Thank you very much for the code. It worked for me too. Unfortunately it also changed for the mobile version (which is normal). How is it possible to change now exclusively the mobile version? 

I'd like the mobile version to look like the picture IMG_6731

Capture d’écran 2023-10-29 à 00.11.43.png

IMG_6730.PNG

IMG_6731.PNG

You can change code to this to make it run on desktop only

@media screen and (min-width:992px) {
.tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
  padding-bottom: 100%;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.