Hey @emgb_520
Just to let you know we can’t always provide support for custom CSS (we do it usually when we have a bit of spare time, but these days is lacking!)
To get the top row of items closer together you could try swapping this code:
.cl-element.cl-element-section.cl-element--instance-1007 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
For:
.cl-element.cl-element-section.cl-element--instance-1007 {
display: grid;
}
However, we’re kindof stuck with CSS grid for some of these items (which is why the spacing can be off) and I see in your other ticket you want some of the items to be closer together.
The previous code supplied by a colleague of mine, and uses CSS grid (something I don’t have a lot of experience with).
I would take a different approach instead using flexbox, so the overall CSS code should look like (remove the code we supplied before):
.cl-element.cl-element-section.cl-element--instance-1007 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: fit-content;
}
.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
width: 15%;
}
.cl-element.cl-element-custom_field.cl-element--instance-1002 {
width: 15%;
}
.cl-element.cl-element-modified_date.cl-element--instance-1003 {
width: 15%;
}
h3.cl-element.cl-element-title.cl-element--instance-1004 {
width: 100%;
}
.cl-element.cl-element-custom_field.cl-element--instance-1005 {
width: 100%;
}
@media only screen and (max-width: 959px){
.cl-element.cl-element-section.cl-element--instance-1007 {
display: block;
}
}
Those lines with the width: 15%; represent the first 3 items that you wanted stacked together in one row.. these 3:
.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
width: 15%;
}
.cl-element.cl-element-custom_field.cl-element--instance-1002 {
width: 15%;
}
.cl-element.cl-element-modified_date.cl-element--instance-1003 {
width: 15%;
}
You could actually remove the width, and just add a margin to control their spacing:
.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
margin-right: 20px;
}
.cl-element.cl-element-custom_field.cl-element--instance-1002 {
margin-right: 20px;
}
.cl-element.cl-element-modified_date.cl-element--instance-1003 {
margin-right: 20px;
}
I hope that helps!
