[Support request] Customizing website to mobile view (CSS, Topbar, etc)

Home Forums Support [Support request] Customizing website to mobile view (CSS, Topbar, etc)

Home Forums Support Customizing website to mobile view (CSS, Topbar, etc)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1056518
    Katharina

    Hi Support team,
    I finished so far my website and would like to customize it to mobile viewing. There are a lot of adjustments to do. How do I go ahead?

    Here are few things that I noticed.
    – Can I not show the top bar on mobile devices?
    – Not show my success bar since it doesn’t look great on mobile.
    – The section “HOW IT WORKS” doesn’t look good at all on mobile, how could I improve it? https://paste.pics/76XEW
    – For the Opt-in in my footer can I disable the image in mobile? And the background is not showing, how can activate it on mobile as well?
    – The Footer bar has the same problem as the Opt-in, The background is not showing.

    I think this is enough for now to work through.

    Thanks
    Kati

    #1056776
    David
    Staff
    Customer Support

    Hi there,

    1. Remove top bar on mobile – this CSS:

    @media (max-width: 768px) {
        .top-bar, img.rotate-optin {
            display: none;
        }  
    }

    2. You can use the GP hide-on-* classes to hide elements:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    For example the:
    <div class="custom-success-container">

    becomes :

    <div class="custom-success-container hide-on-mobile">

    3. How it works – you have inline styles in your HTML eg.
    <p class="sub-title" style="text-align: left; padding-left: 275px;">

    The problem with this method is its always 275px pushed to the left so its never gonna stay aligned left with the heading. Would it not be better to remove the padding and text-align: center; ?

    4. Use a hide-on-* class in the img eg.

    <img class="rotate-optin alignleft wp-image-329 hide-on-mobile" .........

    5. Remove optin image – i included that in the CSS in point 1.

    5. and 6. Some of your styles are inside an @media query for desktop so they need to be moved outside of the @media query for example the optin background:

    @media (min-width: 768px) {
        .custom-optin-footer {
            background-color: rgba(229, 212, 206, 0.67);
        }
    /* more CSS below */

    You need to move that property outside of the media query, preferably above it so your code would look like:

    .custom-optin-footer {
        background-color: rgba(229, 212, 206, 0.67);
    }
    @media (min-width: 768px) {
    /* more CSS below */

    Find the footer background styles and also move that out of the media query.

    #1057499
    Katharina

    Thanks David, I’ll give it a try today

    #1057645
    David
    Staff
    Customer Support

    You’re welcome

    #1058302
    Katharina

    Can I make some additional changes

    1. Top bar
    Can I have a shorter text for the top bar instead hiding it?

    3. The section HOW IT WORKS is centered but is there a way to line the symbols up?

    5. The background is displayed in mobile as well but the angled section makes it bit messy. I couldn’t figure out how to disable only the angled section 1

    Thanks

    #1058307
    Katharina

    For some reason the logo bar doesn’t work properly in mobile or tablet. All logos are on the left and not equally centered

    I also noticed that since I made the changes I have on few pages the featured Image twice.
    https://test.katisiemens.com/de/leistungen/
    https://test.katisiemens.com/de/erfahrungsberichte/
    https://test.katisiemens.com/de/nahrungsergaenzung/

    Is it possible to disable side bar on tablet and mobile?

    #1058402
    David
    Staff
    Customer Support

    1. Remove the CSS provided to hide. Then change the top bar widget to a HTML widget and you can add different text for different devices using the hide-on-* classes:

    e.g

    <p class="hide-on-mobile">I am longer text and display on tablet and mobile</p>
    <p class="hide-on-tablet hide-on-desktop">Short text for mobile</p>

    3. Really tricky to do that without completely changing ht HTML involved

    5. Find this CSS and place it inside a @media query so this:

    .angled-section1:before {
        top: 0;
        transform: skewY(-1deg);
    }
    .angled-section1:before, .angled-section1:after {
        background-color: #ffffff;
        content: '';
        display: block;
        height: 20%;
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        transform-origin: 0%;
    } 

    becomes:

    @media (min-width: 769px) {
        .angled-section1:before {
            top: 0;
            transform: skewY(-1deg);
        }
        .angled-section1:before, .angled-section1:after {
            background-color: #ffffff;
            content: '';
            display: block;
            height: 20%;
            position: absolute;
            left: 0;
            right: 0;
            z-index: -1;
            transform-origin: 0%;
        }
    }

    7. Featured images, you need to edit the Header Elements you have created and check Disable Featured Image

    8. This CSS:

    @media (max-width: 768px) {
        #right-sidebar, #left-sidebar {
            display: none;
        }
    }
    #1060272
    Katharina

    Thanks David,
    It’s looking already so much better. But there are still few things to improve.

    Why is the menu like that:
    https://paste.pics/7881C
    When I change the browser width it’s somewhere between tablet and mobile. The menu is not switching to mobile right away. there is a area where it isn’t a mobile menu, nor a desktop menu.

    And how can I fix the logo bar in mobile.
    https://paste.pics/78846

    Thanks
    Kati

    #1060378
    David
    Staff
    Customer Support

    Couple of choices, both are in Customizer > Layout > Navigation
    1. Increase the Mobile Menu Breakpoint so it kicks in earlier.
    2. Reduce the Menu Item spacing so the navigation occupies less width.

    Logo bar try this CSS:

    .custom-container .flex-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.