Home Forums Product Support Zealot A possible issue with CSS on devices with small screens

Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #9731
    Tim Bonner
    Participant

    If you don’t make any posts sticky, Zealot shows the latest post in the Top Story position on your home page.

    There appears to be an issue with the CSS on smaller screens where this is the case. When I view my site on a mobile (without any sticky posts), the Top Story section appears over the Site Title. It looks a bit of a mess.

    Is there a fix for this?

    #9841
    Michael Beil
    Keymaster

    So sorry for the delay as we normally respond within a day.

    Can you private reply with a URL so we can take a peak?

    #9844
    Tim Bonner
    Participant

    I added a sticky post so it doesn’t happen at the moment.

    I sent you some login details on another support request for my site.

    If it’s okay with you, you can remove the sticky post and resize the home page and you’ll see the issue I mean.

    #9845
    Michael Beil
    Keymaster

    I do not see an issue. Are you referring to the featured image?

    #9846
    Tim Bonner
    Participant

    I’ve removed the sticky post Michael.

    If you resize your browser window on my site to small or look at it on a mobile, you’ll see that the Top Story does something odd.

    It is to do with the featured image, I think.

    #9847
    Michael Beil
    Keymaster

    Oh ok, now I see. I believe the intended format was with the sticky post in mind.

    Do you need something different? If so, it could be a little while to check on an enhancement as we are working on a few things over here.

    #9848
    Tim Bonner
    Participant

    I think as there isn’t a readme file or a manual with Zealot, people won’t realise that they need to use a sticky post. I certainly didn’t.

    It was only after looking through a blog post on the Aesop Story Engine site that I noticed that it was mentioned.

    I’m happy to use a sticky post but I think it would be a good idea to sort out the CSS so that it works without that too at some point.

    #9850
    Michael Beil
    Keymaster

    We agree. Thanks for the feedback and feel free to get in touch with us whenever.

    Again, sorry for the delay.

    #10589
    Stephen Morrey
    Participant

    I am not sure whether you’ll see this as the thread is marked as resolved however I have been playing with the child theme which is now working well and appear to have generated the same issue with the CSS as described above.

    The normal approach and sticky post resolves the CSS when viewing on mobile devices. However, when setting the site to have a front landing page the post page now displays the CSS issue even if the posts are sticky on mobile devices. Is there a way around this as I would like a landing page to the site?

    Any help appreciated.

    Steve.

    #10621
    Michael Beil
    Keymaster

    Hey Stephen,

    Can you send me a URL or screenshot by chance?

    #10622
    Stephen Morrey
    Participant

    I’ve uploaded one so you can see it and attached the URL.

    Screenshot small screen

    Thanks,

    Steve.

    #10652
    Michael Beil
    Keymaster

    Oh ok, now I am seeing what is going on.

    #10952
    Hyun Supul
    Keymaster

    Hi,
    We will release a new version of Zealot that fixes this problem soon. Meanwhile, to fix the problem you can put the following as your custom CSS.

    @media (max-width:767px)
    {
    .home .zealot-top {padding:20px 20px 0;background:#414652}
    .home .zealot-top .top-featured-image{display:none}
    .home .zealot-top .entry-wrap{padding:0;position:relative}
    }

    .zealot-top .entry-title a{
    border-bottom:none;
    }

    #10953
    Hyun Supul
    Keymaster

    BTW, we recommend you use Simple Custom CSS plugin.

    #11023
    Hyun Supul
    Keymaster

    A new Zealot version (1.1.1) has been released and it should address the problem.

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