Support » Theme: Kale » Display in Mobile Mode

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi there,

    Thank you for getting in touch with us.

    1. It seems that you have both background image and text which overlap each other on mobile. I would recommend to hide text on mobile with this css:

    @media (max-width: 767px) {
        .logo .header-logo-text {
            display: none;
        }
    }

    2. To change slider font size on mobile add this css:

    @media (max-width: 767px) {
        .frontpage-slider .caption h2 a {
            font-size: 32px;
        }
    }

    Hope that helps. Thank you for your time in this.

    Best regards

    Thread Starter flowerscat

    (@flowerscat)

    Hi jarektheme

    First of all – thank you.

    1. It seems that you have both background image and text which overlap each other on mobile. I would recommend to hide text on mobile with this css:

    That worked.

    The only tiny problem there is that on ‘tablet’ view, the logo appears very tiny – whereas on desktop and mobile it now appears fine. Is there a solution for this? The padding around the tagline is set to 26 px – would changing this help?

    To change slider font size on mobile add this css:

    This worked beautifully – thank you!

    Hi again,

    I’m glad to hear that this works 🙂

    Please try this css:

    @media (min-width: 768px) and (max-width: 1024px) {
        .tagline p {
            font-size: 42px;
        }
    }

    Kind regards

    Thread Starter flowerscat

    (@flowerscat)

    Hi jarektheme

    Unfortunately that code didn’t help – the logo is still quiet tiny and not very clear in tablet mode
    (it is clearly visible on both desktop and mobile mode)

    Thanks

    Hi there,

    I’m very sorry for back and forth on this.

    It seems that your site is in coming soon mode. Please try to play with the values from my last code. If that doesn’t help please make your site public so I’ll take a look at it again.

    Best

    Thread Starter flowerscat

    (@flowerscat)

    Hi jarektheme

    I have moved the logo to header-3 section – and chosen to hide header-2 in mobile mode, leaving only header-1 visible. This leaves the logo visible on all devices, even when the menu items are hidden.

    Currently it looks like this when viewed on a tablet:
    https://ibb.co/dcXq9m

    How do I create a little gap between the logo the ‘about’ for media-mode? – if I adding padding to the logo, all the menu items, including the two black lines that define the menu, move to the right.

    I just want to move the menu items slightly to the right, without moving the two black lines above and below the menu.

    p.s. the site is now live again.

    Many thanks!

    Hi @flowerscat,

    Try something like this:

    @media (max-width: 992px) {
        .navbar-collapse.collapse {
        padding-left: 100px;
        }
    }

    Kind regards

    Thread Starter flowerscat

    (@flowerscat)

    Hi jarerktheme

    Thanks – that worked!

    A final question – is there anyway to constrain the image in header-3 in media mode – looks like this currently when you expand on the menu: https://ibb.co/ncEJzm

    Hi @flowerscat,

    Please try this css:

    @media (max-width: 767px) {
        .header-row-3 {
            background-size: 52px;
        }
        .navbar-collapse.collapse {
            padding-left: 15px;
        }
    }

    Hope that helps.

    Best

    Thread Starter flowerscat

    (@flowerscat)

    Thank you – really appreciate it.

    Hi @flowerscat,

    I am glad it is working out for you 🙂

    Would you please take some time out from your busy day to leave us a quick review.
    We’d really appreciate it 🙂

    Thread Starter flowerscat

    (@flowerscat)

    done 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Display in Mobile Mode’ is closed to new replies.