Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 18, 2016 at 12:19 pm #688096
    SkinnovationIBK

    Hey,

    I’m trying to show the incoming events list horizontally with big photo (like Grid layout), I added the following code but it didn’t work:

    
img.av-upcoming-event-image.wp-post-image {
    width: 200px;
    border-radius: 0;
} 

.av-upcoming-events .av-upcoming-event-entry.av-upcoming-event-without-image {
    width: 31.5% !important;
    margin-left: 2% !important;
}

.av-upcoming-events .av-upcoming-event-entry {
    width: 31%;
    float: left;
    margin-left: 2%;
}

    Can you help me with this.
    Thanks in advance :)

    September 20, 2016 at 1:01 pm #689139
    Yigit

    Hey SkinnovationIBK!

    Can you please post the link to your page and a screenshot showing the changes you would like to make?
    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Cheers!
    Yigit

    September 20, 2016 at 1:42 pm #689179
    SkinnovationIBK

    Hey Yigit,

    Here’s the link of the website:
    http://inncubator.at/home

    And I need the events to be showed like this:
    http://imgur.com/ECSxmRC or http://imgur.com/WvuMksp

    Thanks for your help :)

    September 20, 2016 at 1:50 pm #689187
    Yigit

    Hi!

    I changed your code to following one 

    .av-upcoming-events .av-upcoming-event-entry {
    width: 31%;
    float: left;
    margin-left: 2%;
    clear: none;
}
.av-upcoming-event-image {
    width: 100% !important;
    border-radius: 0 !important;
}
.av-upcoming-event-data {
    width: 100%;
    padding-top: 20px;
}

    Please review your website now

    Cheers!
    Yigit

    September 20, 2016 at 1:57 pm #689194
    SkinnovationIBK

    Perfect! Thank you so much.
    Can you also provide me the code to make it responsible in small screen.
    Thanks Yigit.

    September 20, 2016 at 1:58 pm #689196
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.av-upcoming-events .av-upcoming-event-entry {
    width: 100%!important;
    margin-left: 0!important;
}}

    Cheers!
    Yigit

    September 20, 2016 at 2:02 pm #689203
    SkinnovationIBK

    Wow! you’re awesome!!!!!
    Thanks!

    September 20, 2016 at 2:03 pm #689205
    Yigit

    Hey!

    You are welcome, glad if i could help :)
    Let us know if you have any other questions or issues and enjoy the rest of your day!

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Styling Incoming events list in Events Calendar’ is closed to new replies.