Mobile Optimization

  • Author
    Posts
  • #149757

    Hi Taras,

    Nahita here. Just finalizing my website. Need your help with a few things:

    1. How can I reduce the size of the website for mobile view? Everything seems too zoomed in, not sure if this makes sense.

    2. How do I align the site title and site tagline in mobile view the way it looks in desktop view?

    3. How do I customize the menu to be the same as the desktop version?

    4. How can I reduce the padding of the page content area from the top. It seems that the padding I did on desktop view is overflowing in mobile view.

    5. How can I remove the secondary navigation from mobile menu?

    The blog I need help with is hcsafrika.wordpress.com.

    #149789

    tarasdashkevych
    Theme Author

    Hello Nahita,

    “How can I reduce the size of the website for mobile view? Everything seems too zoomed in, not sure if this makes sense.”
    – The theme’s foundation is based on a responsive design (https://en.wikipedia.org/wiki/Responsive_web_design) as the most of the other sites on the Internet right now. It adapts to a screen resolution to avoid any usability issues. Unfortunately, it’s not possible to disable it.

    “How do I align the site title and site tagline in mobile view the way it looks in desktop view?”
    – The header text is centered in mobile views. You can disable it by using this custom CSS:

    
    #masthead {
      text-align: inherit;
    }
    

    “How do I customize the menu to be the same as the desktop version?”
    – The theme displays a mobile menu in smaller screens due to a limited amount of space in mobile views.

    You can use this custom CSS to display a regular primary menu in mobile views. Please note, it may cause styling issues due to a limited amount of space in the header area:

    
    .site-header .main-navigation {
      display: block;
    }
    

    “How can I reduce the padding of the page content area from the top. It seems that the padding I did on desktop view is overflowing in mobile view.”
    – Could you please send me a link to the page, so I can inspect it and provide a solution for you?

    “How can I remove the secondary navigation from mobile menu?”
    – Please use this custom CSS:

    
    .mobile-navigation > .menu:nth-of-type(1) {
      display: none;
    }
    

    Thank you,
    Taras

    #149829

    Hi Taras,

    Thank you.

    “How can I reduce the padding of the page content area from the top. It seems that the padding I did on desktop view is overflowing in mobile view.”

    https://hcsafrika.wordpress.com/news/

    “How do I customize the menu to be the same as the desktop version?”

    I meant for the color and font customizations?

    #149830

    Taras,

    I’m viewing the site on mobile and it seems the background images and css codes (for color, background, content-area colors) isn’t reflecting. It shows when I’m editing the website in mobile view on wordpress but when I view the website on a phone, it does not.

    Any idea why this is so?

    #149844

    tarasdashkevych
    Theme Author

    Nahita,

    “How can I reduce the padding of the page content area from the top. It seems that the padding I did on desktop view is overflowing in mobile view.”
    – Could you please try this custom CSS:

    
    .blog .site-content .site-main article,
    .archive .site-content article {
       margin-top: 30px;
    }
    

    “I meant for the color and font customizations?”
    – Thank you for clarification. Please use this custom CSS to change the colors of the mobile menu:

    
    #toggle-sidebar,
    #toggle-sidebar .mobile-navigation .menu > li > a {
      background: #100a4f;
    }
    
    #toggle-sidebar .mobile-navigation .menu > li > a,
    #toggle-sidebar .social-list li {
      color: #ffffff;
    }
    
    #toggle-sidebar .mobile-navigation .menu li a {
      border-bottom-color: #ffffff;
    }
    
    #toggle-sidebar .search-form {
      background: #eee;
    }
    

    “I’m viewing the site on mobile and it seems the background images and css codes (for color, background, content-area colors) isn’t reflecting…”
    – I can confirm that some styles do not work in mobile but I am not sure why. I need some time to investigate this issue. It might be a site-specific problem. I let you know when I have an update.

    By the way, I would recommend to remove “white-space: pre;” from the custom CSS you’ve used for the custom credits text. It causes overflow issues in mobile views.

    Thank you,
    Taras

    #149858

    tarasdashkevych
    Theme Author

    Nahita,

    I’ve run a few tests on your site and here is what I’ve found:

    The reason why the header colors/styles disappear in mobile views is because a mobile device cannot properly resize the background image.

    Currently, your site does not have any background image/color for the header section. Instead, your custom background image is applied to the body element. Moreover, this custom background image is only shown only on the Front Page because of the custom CSS added to your site.

    I am referring to this custom CSS:

    
    .home {
        background-image: url(https://hcsafrika.files.wordpress.com/2019/10/holos-background40300x-100.jpg);
        background-position: left;
        background-attachment: fixed;
        background-size: 1920px 1080px;
        background-repeat: no-repeat;
    }
    

    The same thing apples to the Custom Footer Text section. A mobile device cannot properly resize the background image because of the custom CSS added to your site. As a result, it causes the issue.

    You specify the background-size in your custom CSS for these section. This size is larger than a screen resolution of the mobile device.

    Try to use background-size: cover; instead of fixed width and height.

    Also, note that background-attachment: fixed; might not work in mobile devices. So, try to use background-attachment: scroll;

    Hope this helps. Let me know if you have any additional questions.

    Thank you,
    Taras

    #149872

    Taras,

    Thank you so much! Everything in this thread worked out!

    #149873

    tarasdashkevych
    Theme Author

    You are very welcome Nahita!

The topic ‘Mobile Optimization’ is closed to new replies.