Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 7, 2015 at 12:09 am #531684
    designhousegroup

    Hello, I would like to know if it is possible to put the Events List widget events inline. I have made an attempt and it is almost perfect but it doesn’t seem like the widths are even and I’m not sure if this is correct. I realize that this is a customization so I would be grateful for any tips. This is the code I used to style it:

    .tribe-events-list h2.tribe-events-page-title {
    text-transform: uppercase;
    font-size: 50px;
    }
    .av-upcoming-event-image {
    width: 100px !important;
    }
    .av-upcoming-event-entry {
    display: inline-block !important;
    max-width: 445px !important;
    padding: 0px 0px 30px !important;
    }
    .av-upcoming-event-data {
    padding-right: 35px !important;
    }
    .av-upcoming-event-meta {
    top: 1px !important;
    font-size: 16px !important;
    }

    Thanks in advance.

    November 9, 2015 at 4:50 am #532308
    Ismael

    Hi designhousegroup!

    Thank you for using Enfold.

    Please remove this line:

    .av-upcoming-event-entry {
display: inline-block !important;
max-width: 445px !important;
padding: 0px 0px 30px !important;
}

    .. replace it with:

    .av-upcoming-event-entry {
    display: block;
    float: left;
    width: 33%;
    clear: none !important;
}

    Use css media queries to adjust the layout on smaller screens: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Regards,
    Ismael

    November 9, 2015 at 8:52 pm #532876
    designhousegroup

    I appreciate that. Thank you. The only issue is that it stays in 3 columns squished even on small phone screen. I need it to break down to less columns on smaller screens. Is there an adjustment I can make?

    • This reply was modified 9 years ago by designhousegroup. Reason: to make more clear
    November 9, 2015 at 9:17 pm #532891
    designhousegroup

    I figured it out. I added some breakpoints: And now it is perfect. Thanks very much for your help in guiding me.

    @media screen and (max-width: 1000px) {
    .av-upcoming-event-entry {
    width: 50% !important;
    }
    @media screen and (max-width: 780px) {
    .av-upcoming-event-entry {
    width: 100% !important;
    }

    November 9, 2015 at 10:58 pm #532942
    Basilis

    Hey!

    Glad you got it solved!
    Please do not hesitate to let us know, if you do need anything else.!

    Best regards,
    Basilis

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Events List Widget’ is closed to new replies.