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

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;

}

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?

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;

}

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
 

My testing

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!

You can try

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

to remove the bottom padding

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.

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

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

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%;
}
}