Docs

[roman5987]

Hi, I am using The Grid and in the skin design section I set it such that there is a border radius on each item of the grid. This is recognized if you inspect the .tg-test3 .tg-item-inner element, however its not displayed. The items remain square shaped, I’m not sure what may be overriding this since is set it to !important..

[roman5987]

This reply has been marked as private.

[Lely]

Hello There,

There is a container inside that has no border radius. This container is on top of that. It should be added instead on the media holder. Please edit the skin and apply the border on the media container, or use the following CSS instead.

.tg-test3 .tg-item-media-holder.tg-light {
    border-radius: 25px !important;
    background: #ffffff;
}

Hope this helps.

[roman5987]

Hi, this works well for grid items that do not use an image as a background, however the ones that do have an image retain the sharp corners.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

#grid-773 .tg-grid-slider {
    border-radius: 10px;
}

Hope that helps.

[roman5987]

Hi, this adds a border radius to the grid itself, not each element. The above code:

.tg-test3 .tg-item-media-holder.tg-light {
    border-radius: 25px !important;
    background: #ffffff;
}

Added a border to each item, however if there is a background image, the corners stick out as shown in the attachment in the previous response. That’s the element I’m trying to target.

[Rue Nel]

Hello There,

Thanks for updating in! Please make use of this code instead:

.tg-grid-slider .tg-item{
 border-radius: 26px !important;
 overflow: hidden;
}

Please let us know if this works out for you.

[roman5987]

Hi, thank you that is exactly what I was looking for. I was also wondering how to add padding to each of the items in the grid, so that they are not so close together. I tried to do this in the skin editor Item Styles> Position > Paddings, however this does not change anything. I also tried to add 5px padding to the selector used above, however this breaks the structure entirely.

[Lely]

Hi There,

If you’re referring to spacing with each box, it should be margin. Padding will only add spacing inside the box. Edit your Grid > Grid tab > Columns and Rows > Adjust Items Spacing (gutters). See attached screenshot.

Hope this helps.

[roman5987]

Hi, thanks, that’s what I needed. I have one last question about the grid items. I would like to have a bit more control over their size. Right now the height and width automatically adjust based on the screen size. I would like to be able to fit more items on the screen by limiting the max size, when I try something like:

.tg-item{
  max-width:200px!important;
  max-height:200px!important;
}

This does decrease the size of the item as I wanted, but it leaves large gaps between each item. I’ve attached a screenshot.

[Rue Nel]

Hello There,

Thanks for updating in! Even if you set a maximum width and height, the grid will still display the number of columns you have set in the grid settings. It would be impossible to do what you have in mind. I would just recommend that you stick to the number of columns or make sure that you display at least 6 columns for your grid in the grid settings.

http://prntscr.com/e791ag

Hope this helps.

[Author]

Posts