[juppsanParticipant]

Hi,

-I have a 4 grid spreadsheet layout with images. The images should be 2:3 dimension. I can’t get the landscape AND portrait images to fill their container (.image-wrap) without stretching.. can you help me?

-Right now the portrait images are right, but I would like the 9:16 portrait images to fill the container.

-The only way I found it working was with px, but I would like the container to be responsive so if there is another way please help me 🙂

http://mikkoharma.com/studio-2/

Here’s what I added to the CSS:

.image-wrap {
height: 180px;
overflow: hidden;
}

.image-wrap img {
display: block;
}

THANK YOU! 🙂

[juppsanParticipant]

This reply has been marked as private.

[juppsanParticipant]

*-Right now the portrait images are right, but I would like the 9:16 LANDSCAPE images to fill the container.

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.image-wrap .kuva,
.image-wrap .kuva img {
	min-width: 125%;
}

Hope it helps, Cheers!

[juppsanParticipant]

who thank you so much! 🙂

Is there anyway to center the images in the container?

Thank you!

[ZeshanMember]

Hi there,

You can center it horizontally using following CSS code instead:

.image-wrap .kuva,
.image-wrap .kuva img {
   min-width: 125%;
   margin-left: -13.5%;
}

Thank you!

[juppsanParticipant]

Thank you for your great support! 🙂

[ThaiModerator]

You’re most welcome 🙂

If you need anything else, please let us know.

[juppsanParticipant]

🙂

Is there a way to keep the promotions of the container 2:3? Because I’m using px on the height, it won’t keep it’s shape.. how can I correct this?

[RupokMember]

Hi there,

Thanks for updating. Would you please clarify a bit that what you are trying to accomplish? Some screenshot would be appreciated.

Cheers!

[juppsanParticipant]

Hi,

Ofcuorse! I would like my images to be 2:3 ratio and responsive 🙂

Right now they are optimised for laptop and have a height of 180px, but obviously that doesn’t look good on a bigger or smaller screen.. %/rem/em didn’t do the job with the css I have right now.

Thank you!

(Images added: laptop vs big screen (don’t mind the menu) )

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.page-id-61 .x-section a
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 66.66% 0 0 0;
  overflow: hidden;
}

.page-id-61 .x-section a img
{
  position: absolute;
  display: block;
  max-width: 100%;
/*   max-height: 100%; */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

Hope this helps – thanks!

[juppsanParticipant]

It worked perfectly thank you! 🙂

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[juppsanParticipant]

Can you help me with one last thing? 🙂

How do I overwrite the code you just wrote me in my media queries?

On iPad/mobile there is no spreadsheet, the pictures should just be lined underneath each other.

Thank you!

[Author]

Posts