How to reformat event list display?

  • Resolved Esch

    (@esch)


    2 years, 9 months ago

    Hello! I am in need to tweak the display of the events on my page. Please see this FILE.

    I find it odd that there’s an extra column on the left hand side. What I want to do is have the date go all the way across, then the time all the way across underneath it. Not in two columns side by side. You can see in the 2nd event in the screenshot that because it doesn’t have an end time, the location is moved up and makes it look horrible.

    I would love it to look like this with one column only: (ignore the extra line spacing, that’s wordpress’ blocks adding that.)

    Sat, Oct.28 – Tue, Nov.28

    7:00pm

    LOCATION LISTED

    I am familiar enough with editing back end files, so if you can point out where I can remove that 2nd column, I would greatly appreciate it.

    Also a suggestion: I would love the ability to add html formatting to the fill in boxes. Example: I tried to add a < BR > in my location field to move the town/city down on its own line, but the plugin just strips that out.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Guido

    (@guido07111975)

    2 years, 9 months ago

    Hi,

    Strange, every part of the event details should have its own row. Only when using date icons it’s possible to display the rest of the event details on right side of the icons. Can you share a link to your website? If this is not possible, what’s the name of your theme?

    Line breaks are not an option, HTML is stripped by default.

    Guido

    Thread Starter Esch

    (@esch)

    2 years, 9 months ago

    Thank you for your reply! Can you give me your email address please? I’ll send the information there.

    Plugin Author Guido

    (@guido07111975)

    2 years, 9 months ago

    Sorry, I only give support here.

    Guido

    Thread Starter Esch

    (@esch)

    2 years, 9 months ago

    Ok no problem. I’ve narrowed the issue down to the added CSS I put in my child theme. See this IMAGE to see what it looks like before and after applying the CSS tweaks. You’re right, it is all on separate lines in the original. Not sure what happened with this and why I didn’t spot that my tweaks were causing the issue sooner.

    This is the extra CSS I added to my child theme. Do you have any recommendations on what I can tweak/remove to fix my issue? Thank you for your help!

    #vsel .vsel-meta h3 {margin-bottom:0px;}
#vsel .vsel-meta p {margin-bottom:0px;font-size:1em;}
#vsel .vsel-meta-title {font-size:1.25em;font-weight:bold !important;color:black;text-decoration:underline !important;}
#vsel .vsel-meta-title a {font-size:1.25em;font-weight:bold;color:black;text-decoration:underline;}

.vsel-meta {width:53%;}
.vsel-image-info {width:46%;}
.vsel-content {padding-bottom:0px;margin-bottom:10px;}

.vsel-meta-date {clear:none; float:left; width:60%;}
.vsel-meta-time {clear:none; float:left; width:40%;}

@media screen and (max-width:39.9375em) {
    .vsel-meta, .vsel-meta-right {width:100%; clear:both; float:left;}
    .vsel-image-info, .vsel-image-info-left {width:100%; clear:both; float:left;}
}

#vsel .vsel-content {padding:5px; border-bottom:0; border:3px dashed #ccc;}



    Thread Starter Esch

    (@esch)

    2 years, 9 months ago

    Nevermind, I was able to find the problem CSS and removed it, and now everything is on it’s own line again. Not sure why I had that in there in the first place. Thanks!

    Plugin Author Guido

    (@guido07111975)

    2 years, 9 months ago

    Great you’ve solved it.
    Regarding the CSS, you can remove almost everything because plugin has been updated many times and most CSS is redundant now.

    Guido

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to reformat event list display?’ is closed to new replies.