SKT Event icons not displaying properly

Home Forums All Other Themes SKT Event icons not displaying properly

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #200162
    Ali MohammadiAli Mohammadi
    Participant
    • Topics: 8
    • Replies: 19
    • Total: 27
    Member since: January 31, 2022

    Hello, I am using the nightclub theme for the website of comedyville.ca. There is a little problem with the event icons on the Home page and the Events page on mobile view. The photos that are used show properly on Home Page at https://www.comedyville.ca/ but they are cut off at the bottom on the Upcoming Shows page at https://www.comedyville.ca/upcoming-shows/.

    You can view the screenshot here,

    https://pasteboard.co/S8nX7kfSzOkv.png

    The issue is not visible when viewing the Responsive Mode on Elementor. Also, the issue does not happen when checking on desktop.

    Let me know if you need more info.

    Thanks!

    #200178
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29068
    • Total: 29068
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .column-event .event-image { height:auto;}
    .column-event .event-image img { vertical-align:top;}
    }

    Regards,
    Dave

    #200195
    Ali MohammadiAli Mohammadi
    Participant
    • Topics: 8
    • Replies: 19
    • Total: 27
    Member since: January 31, 2022

    Hello Dave, I have put the following in Custom CSS and still see the icons cut off from the bottom on the events page. The problem is online on mobile and not desktop.

    Regards

    #200225
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29068
    • Total: 29068
    Member since: August 16, 2013

    Hi,

    Remove ๐Ÿ‘‡

    @media screen and (max-width:479px) {
    .column-event .event-image { height:auto;}
    .column-event .event-image img { vertical-align:top;}
    }

    Replace ๐Ÿ‘‡

    @media screen and (max-width:479px) {
    .column-event .event-image { height:auto !important;}
    .column-event .event-image img { vertical-align:top !important;}
    }

    Regards,
    Dave

    #200321
    Ali MohammadiAli Mohammadi
    Participant
    • Topics: 8
    • Replies: 19
    • Total: 27
    Member since: January 31, 2022

    Hi Dave, I still see the same way on a mobile phone for the events page. I did replace the code.

    I used this code:

    #fixing-icons-on-events-page
    @media screen and (max-width:479px) {
    .column-event .event-image { height:auto;}
    .column-event .event-image img { vertical-align:top;}
    }

    Regards

    #200322
    Ali MohammadiAli Mohammadi
    Participant
    • Topics: 8
    • Replies: 19
    • Total: 27
    Member since: January 31, 2022

    Sorry, I used this:

    #fixing-icons-on-events-page
    @media screen and (max-width:479px) {
    .column-event .event-image { height:auto !important;}
    .column-event .event-image img { vertical-align:top !important;}
    }

    #200324
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29068
    • Total: 29068
    Member since: August 16, 2013

    Hi,

    This is done.

    Regards,
    Dave

    #200410
    Ali MohammadiAli Mohammadi
    Participant
    • Topics: 8
    • Replies: 19
    • Total: 27
    Member since: January 31, 2022

    Thanks, Dave, it’s working now. I appreciate the support.

    #200411
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29068
    • Total: 29068
    Member since: August 16, 2013

    Welcome ๐Ÿ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.