mobile version and small screens

  • Author
    Posts
  • #145339

    Hi,
    I have a few questions regarding the condensed menu list: This menu pops up with a black background and above the ‘Menu’ list block is another large background block. Is there a way to remove this upper black background? It shows up on the phone as well as on small screens and kind of looks very odd and does not serve any purpose.

    Also, when the screen gets smaller and the condensed menu shows up, my logo disappears. As a consequence, there is no logo in the mobile version of the site. Is there way to overcome this and show the logo all the time?

    I also have a custom list and it looks weirdly compressed on my mobile phone. Can I adjust a custom list for the mobile version so that it renders it correctly?

    and unrelated to the above questions, but I have a Twitter widget that works fine in Safari, but does not show up on Firefox – just says “My Tweets”. How can I fix this?

    Thanks for your help!

    The blog I need help with is pletzerlab.com.

    #145467

    emilysuesrq
    Theme Author

    Hello,

    Please add the following CSS (in the Additional CSS section of the customizer):

    @media screen and (max-width: 1024px) {
     #custom-header {
       background: #ffffff;
     }
    }

    This should fix the first two issues of the black bar at the top, as well as allowing your logo to appear again.

    As for the custom list – can you please clarify where on the site I can see this? I’m not sure where this is, thanks.

    Emily

    #145471

    Thanks, Emily! That did the trick. :)

    The list is in the Publications section and I have a custom CSS to have a more readable list. But this is not translated into the mobile version.
    ol {
    padding: 10px 120px;
    list-style-type: none;
    text-align: justify;
    }

    ol li {
    padding: 5px 0;
    list-style-position: outside;
    }

    Thanks for your help,
    Daniel

    #145637

    itsdavidmorgan
    Theme Author

    Hi Daniel,

    Add the following CSS to resolve your list padding in mobile:

    @media screen and (max-width: 1024px) {
        ol {
            padding: 10px 48px;
        }
    }

    I hope this helps. Thanks!

    #145648

    Cool! Thanks so much – it worked. I appreciate your help!

    #145663

    emilysuesrq
    Theme Author

    Great! You’re welcome.

The topic ‘mobile version and small screens’ is closed to new replies.