Event in one row/line in the list

Hi there! How can I line up date/city/venue/ticketbutton all in one row in the events-list on the desktop? It shall look like this: events-list.JPG Currently it looks like this (I’m working with Divi): events-list_actual.JPG Thanks!!! Anton Hi Anton, First disable all event details you don’t want to display, via the settings page (event title, etc). Then add this to your child theme or to page Additional CSS in the Customizer: .page-id-15 #vsel .vsel-content { margin:0 0 10px; padding:0; border-bottom:0; } .page-id-15 .vsel-meta { display:flex; } .page-id-15 .vsel-meta * { flex-basis:25%; flex-grow:1; margin-bottom:0 !important; font-size:inherit !important; } Don’t forget to change the .page-id-15 into the page number you have (see the body tag in the source code of your events page). Guido Thank you so much, that works 🙏 Unfortunately the ticket button (aka featured image 😉) is a bit off the line and the spacings are huge on the big screen: events-list_in_row.JPG and not very responsive on smaller ones: events-list_in_row_narrow.JPG Do you have an idea how to fix this? Did not know there’s also a featured image there. Thought it was a styled “More Info” link. And that would be much easier, because the featured image is not part of the event details section. And in small screen there should be additional styling, don’t think all info can be on the same line? You don’t have a live (test) page so I could take a look? Guido Here’s the actual staging: https://festive-volhard.152-89-92-27.plesk.page/ How could I style a more info-link without coding? I need a ticket button at the right edge of the list 🤷‍♂️ Hi, Gonna look at it today. Your featured image (Tickets) already uses the same font as the rest of the event details, so you could easily use the More Info link for the Tickets. This makes styling easier because featured image (Tickets) is not part of the same container as the other event details. Guido Oh, I now notice Markthalle and Zeche is also part of the same container as Tickets. Is adding that to the Location field an option? So “Hambug Markhalle” and “Bochum Zeche”? And for testing purposes please remove all my custom CSS again, so I can start fresh. Ok, I activated the “more info”-Link (wich is “weitere Informationen” in german) but how can I style it? I can’t even find a variables-field to change the wording. Furthermore it’s placed in between and what’s worst: it’s no button 🥺 The default “Weitere Informationen” can be changed per event in the editor. For styling (making it look like a button) you can use this: .vsel-meta-link a { background-color: #1a2a41; color: #f4c3cd; padding: 0 10px; border-radius: 5px; } To make styling as simple as possible your event info should have this format: Start date / end date: your event date Location: Hambug Markhalle / Bochum Zeche More info link: link to your tickets More info link label: Tickets And hide Event info and Featured image via the plugin settings page (tab Page). Great! We’re getting close 🤗. But the Location still shows up in two rows. The events list doesn’t use the full width of the row of the text-module I placed it in. This reply was modified 9 months, 1 week ago by ROOF_Music . You did not hide the event info and featured image via the settings page yet. Can you remove all the custom CSS, except the styling for the button I gave you today? Event info is hidden, featured image is deactivated and the CSS code is gone. Now it’s stacked up again 😬 Yes, but now add this: #vsel .vsel-content { padding: 0; border: 0; } .vsel-meta { display: flex; gap: 1em; line-height: 50px; } .vsel-meta-link { flex-grow: 1; text-align: right; } This Tickets (more info) link is always pushed to the right, so it fills up the whole line. Please note: I have just updated the CSS from above. I notice you’ve just added the old version. No, I’ve added the new code and it works for the standard laptop screen 🙌. But “gap” is marked red, is this a problem? The “gap” is the space between the elements (date, location, more info link). If this is marked red in the inspect tool of your browser it means it doesn’t work (invalid). But it looks fine, there is space as you can see. Or do you mean something else? You have changed the line-height to 40px , but the button has more height, so it’s best to leave that at 50px . You can reduce the space between events, by reducing the margin. Add this to the #vsel .vsel-content from above: margin:0 0 10px; And you may want to add the page prefix again, so this styling is only added to the event list on this page: .page-id-10 No, it just shows up red in the customizer. Nevermind, it seems to work, that’s true. I am so glad you solved this. One last problem is the vertical spacing in mobile portrait view. “Hamburg -” and “Markthalle” (and “Bochum -” and “Zeche”) are very far away from each other. And between both events there’s a huge space too. events-list_mobile.JPG line-height: 1.3em works better 🥂 First, thanks for the donation! Looks great now 🙂 You can consider changing the width the content area a bit (if possible), to reduce the space between location and the tickets link. And there’s 10px space underneath each of the elements, you can remove that with: .page-id-10 .vsel-meta > div { margin-bottom: 0; }