Equal/fixed height of images on The Grid or Essential Grid Mansory

[tashitendrel]

Dear support,

I am trying to use one of the grid’s pluggins to feature posts slider on the website. I need the images to be presented in equal height without cropping them, in a way The Grid’s Justified layout does. But on the other hand I don’t like in the Justified layout that I cannot set up the number of items showing at once on the page (only the height of the row).

So I wonder if there is a way to even the height of images in the Mansory layout?

Or maybe it would be easier to do in the Essential Grid, which could also work. Right now equal size layout in the Essential grid is cropping the images, which doesnt help. Bur maybe also there is a way around it?

I would prefer to use The Grid, because I have noticed that Essential Grid doesnt allow swiping the item with a finger on ipads and phone, which The Grid does very well. But the equal height layout is very important for me at the moment.

thank you,
beata

[mldarshana]

Hi There,

Thanks for writing in! Always try to use similar resolution of images, so that it will resize correctly with less issues. You can use a tool like Photoshop or even photo resizing tools to prepare your images.

Also there is an option under Grid settings > Force Item Size and make sure to set it as ON. This should make all you grid size same height. Make sure to purge your server cache before testing your changes.

Thanks!

[tashitendrel]

ok. thank you.

Than is there than a way to style the Filter of The Grid a bit? I mean the font, spaces between the filter items and the space between the items and underline?

[christian]

Hey @tashitendrel,

There are several styling options. Please see Navigation Skin section here. The rest could be styled using CSS. Here’s how you can get the selector of the element you wish to edit.

Thanks.

[tashitendrel]

Hi, that video is good, I have actually managed to change some css styles in the filter.

I have just one more question regarding The Grid. I’d like to put arrows on the sides of the slider but in a way that they don’t overlap the images. So there is a space between the arrow and the edge of the slider. I can see margin options in the left and right layout areas, but they dont change anything for me.

best wishes,
beata

[christopher]

Hi there,

You will need to get back to us with the exact URL of the page that contains the arrow, then we can check the code with our browser and if needed give you proper CSS code which will do the trick.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.