Okay
  Public Ticket #2565093
Mobile
Open

Comments

  •  6
    amini06 started the conversation

    Hi,

    Can you advise on what I need to do to make the site more mobile friendly. I feel it wasn't like this before but now the width is too wide for the screen so you can scroll right and left making it hard to browse the site. Also, it cuts off a table on one of the shopping pages. 


    Thank you,


    A

  •  550
    Gabriel replied

    Hi, I think the shop notice breaks the page. Add this to Theme Options - Customizations - CSS Global:

    @media (max-width: 992px) {
    .woocommerce-store-notice, p.demo_store {
        bottom: 0;
        top: auto;
        margin-left: 0;
        padding-right: 0;
    }
    }
  •  6
    amini06 replied

    You're right that store notice bleeds to the right and causes this but the css you provided forces the store notice to the middle of the screen. I've been trying different ways to make it work. Any other solution?

  •  6
    amini06 replied

    I removed the announcement bar styling and 

    I set the left side menu to the below so it's a little lower than the announcement bar

    .side-menu-fixed {
    margin-top: 30px;
    }

    But the bar cover the menu on mobile so I tried increasing top margin but then the menu covers the first section:

    .navbar-main {
    margin-top: 40px;
    }

    I'm wondering if there's a better way to do this to solve all problems




  •  6
    amini06 replied

    also, the table on this page is getting cut off on mobile

    https://ecosanitizer.ca/shop/stay-safe-easy-giving-boxed-kit


    ***update: I fixed this by setting table width to 100%

  •  550
    Gabriel replied

    Hi, use this code instead: 

    @media (max-width: 992px) {
    .woocommerce-store-notice, p.demo_store {
        bottom: 0;
        top: auto !important;
        margin-left: 0;
        padding-right: 0;
        height: 50px;
        position: fixed;
    }
    }

    This should position the bar on the bottom of the screen on mobile.


  •  6
    amini06 replied

    Thank you. It's good for mobile but now the store notice is purple for desktop and I can't seem to be able to code it properly. 

    Did you remove my css stylings? There is nothing left except for the code you pasted below. 

  •  550
    Gabriel replied

    No, haven't touched your code. You probably added the background color inside the media query. You just need to take it out so it affects both desktop and mobile:

    @media (max-width: 992px) {
    .woocommerce-store-notice, p.demo_store {
        bottom: 0;
        top: auto !important;
        margin-left: 0;
        padding-right: 0;
        height: 50px;
        position: fixed;
    }
    } .woocommerce-store-notice, p.demo_store {
        background-color: red;
    }


  •  6
    amini06 replied

    Thank you.


    ps. all my css was deleted somehow, not sure how.

  •  550
    Gabriel replied

    No problem.

    Do a backup of theme options from time to time. Besides importing a new demo, there's nothing that can delete content from theme options.

  •  6
    amini06 replied

    okay. 


    Also, I've already submitted a ticket about this before and you helped me with it but I have the problem again. The header/title is showing on my pages even though I've selected "empty" for the section. Any advice on that?


    Thanks,


    Aslan

  •  550
    Gabriel replied

    Hi Aslan, can you share the page that still has the page title?

    Also, keep in mind you need to set the page title to empty, not the section: https://socanny.com/doc/landkit/#pages

  •  6
    amini06 replied

    Sorry, what I meant was the page displays the category.


    for example: https://ecosanitizer.ca/product-category/sanitizers


  •  550
    Gabriel replied

    Yeah, that's normal for default pages. You can turn it off with this code:

    .woocommerce-page .header-base {
        display: none;
    }
  •  6
    amini06 replied

    Thank you.