Question about template editing

Hello!

Anyone know if this is possible?

Thank you in advance for your help!

Hey @emgb_520

We’re planning on adding rows + columns to make that possible, but right now its not an option in the UI.

With a bit of clever CSS though, it should be possible to do.

Can you send me a link to the page in question, and tell me which items need to go in a row?

Thanks

If you click on the link below, the first result in the list has 3 short items that are stacked. We would like those three to be on the same line:

Thanks!

• This reply was modified 2 years, 10 months ago by emgb_520.

Hello!

Just wanted to check in here (client is getting antsy, I think).

Thank you very much for your help on this!!
-EMGB

Just to let you know I’ll be looking at this tomorrow.

Thanks

Thank you very much!!

Hey @emgb_520 it looks like the link was removed from your reply?

Thanks

Weird! It is here: https://cqdev.wpengine.com/search-results/?_sf_s=prayer

Hey @emgb_520 thanks for sharing again – a colleague had a look at this and supplied this code using CSS Grid:

.cl-element.cl-element-section.cl-element--instance-1007 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
    grid-column:1/2;
}

.cl-element.cl-element-custom_field.cl-element--instance-1002 {
      grid-column:2/3;
}

.cl-element.cl-element-modified_date.cl-element--instance-1003 {
    grid-column:3/4;
}

h3.cl-element.cl-element-title.cl-element--instance-1004 {
   grid-column:1/4; 
}

.cl-element.cl-element-custom_field.cl-element--instance-1005 {
   grid-column:1/4;
}

@media only screen and (max-width: 959px){
  .cl-element.cl-element-section.cl-element--instance-1007 {
    display: block;
   } 
}

It even works on mobile!

Let us know how you get on.

Thanks

• This reply was modified 2 years, 10 months ago by Code Amp.

Thank you, I plan on trying that out as soon as possible!

Hey, Ross!

I was able to try the above code and it works wonderfully, thank you! How do I make them all be aligned left, though. My client would like only to have about 25 or so pixels between each item on the one line instead of spread apart. I tried messing around with the CSS to see if I could get it to no avail. Could you take another look?

Please and thank you in advance for your help!!

Hello!

I just wanted to check in here.

Thank you!

Hello, Ross.

I was wondering if you could provide some input on how to do this.

Thank you!

Hello, Ross.

I was wondering if you could provide some input on how to do this.

Thank you!

Any updates here?
Thank you!