The Grid: space between title and image

Support
#1

Hi, how can I decrease the space between my title and the image in my mansonry skin?

Is the only way uploading the images initially in the right size or can do some CSS instead?

Best regards

Nik

#2

Hello Nik,

Thanks for writing in!

I have checked your site and it seems that you have uploaded different image dimensions. There is 714 x 299 and 714 x 475 images. You must upload the images with uniform image dimension to resolve your issue. Adding a css will not help. Changing the width or height by css will just squeeze or stretch the image which does not look good.

Hope this helps.

#3

Ok thx!

is there a way to add some spacing between the pictures in the grid?

#4

Hey Nikolaus,

Yes, there is an option for that and it is called the Item Spacings. For more details, please see https://theme-one.com/docs/the-grid/#grid_settings

Thanks.

#5

Ok cool.

my hyphens CSS doesn´t apply to all products.

.sofia-grid .tg-item-title {
font-size: 16px;
-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
word-wrap: normal;
}

any idea?

#6

Ok nevermind, I just removed the product and it seems working now.

another question: can I remove the 3 dots after “2017”. They are not suposed to be there because I only want the vintage of the wine. In the image description I only wrote 2017

any idea?

#7

Glad you’ve sorted out the other issue.

Regarding the dot, edit the skin in the Skin Builder, select the Excerpt layer and remove the Excerpt Suffix.

For more details about the Skin Builder, please see https://theme-one.com/docs/the-grid/#skin_builder

Thanks.

#8

Perfect thx! Ok I got more questions ^^

  1. How can i change the Filter items Design like this

  2. Is there a way to for force 2 rows in the item titles so everything looks like the same?

  3. How can I use the filter buttons on desktop and on mobile the dropdown.

Best regards

Nik

#9

Hi Nik,

Each skin has a different layout. I suggest you to switch to another skin and move all the filter, search, sort items to the same area like this screenshot:

Please add this custom CSS:

div#grid-59 .tg-item .tg-item-title {
    max-width: 80%;
    margin: 0 auto;
}

You can add 2 filters to your grid, then hide each filter using the custom media query CSS:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope it helps :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.