[Resolved] padding and menu setting for screen size for tablet and cell

Home Forums Support [Resolved] padding and menu setting for screen size for tablet and cell

Home Forums Support padding and menu setting for screen size for tablet and cell

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #674085
    Torsten

    Hi,
    1.) I would like to eliminate the menu for tablet and/or cell phone.
    As I’m no longer working with ubermenu I tried to change

    .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
        display: none !important;
    }

    to

    @media (min-width: 768px) {
    	.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
        display: none !important;
    }
    	}

    but then there is no menu at all…

    2.) The menu should be much wider for tablet and/or cell phone as it actually is.

    3.) Can I set the paddings seperately for tablet and/or cell phone?
    left and right padding for header and content 5px and

    4.) content top padding maybe 50 px for tablet and cell, actual setting is

    .custom-fixed-header + * {
          padding-top: 220px;
    }

    Thx ahead!
    Torsten

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #674436
    David
    Staff
    Customer Support

    Hi there,

    this CSS should help, add it after the CSS you have set for the desktop.

    @media (max-width: 768px) {
        .main-navigation ul {
            display: block !important;
        }
        .main-navigation .menu-toggle {
            display: none !important;
        }
        .site-header .inside-header {
            padding: 10px 10px 10px 10px; /* adjust */
        }
        .main-navigation .inside-navigation {
            padding: 10px 10px 10px 10px; /* adjust */
        }
    }
    #675339
    Torsten

    Hi David,
    thx for your help so far. I changed the part of the code for the menu to

    .main-navigation .inside-navigation {
            display: none !important;

    perfect!
    what do I need to do for the text padding for cell and tablet please? left, right and top…
    screeshots will show you the problems with space below header and overlapping text on cell
    https://bit.ly/2CN7sLs /// https://bit.ly/2CV7IYO
    best reagrds,
    Torsten

    #675355
    David
    Staff
    Customer Support

    Aah ok, sorry i thought you wanted to keep the horizontal nav on tablet and mobile?

    #676095
    Torsten

    Hi David,
    hope you’ve seen the rest of my request as well:
    cell/tablet top padding
    https://bit.ly/2CN7sLs (I guess I solved this)
    I tried

    @media (max-width: 768px) {
         .custom-fixed-header + * {
          padding-top: 0px;
    }

    what do I need to do for the left/right text padding for cell and tablet please?
    I guess logo width or 10px left and right padding would be nice.
    screeshot will show you the problems with overlapping text on cell:
    https://bit.ly/2CV7IYO
    best reagrds,
    Torsten

    #676119
    David
    Staff
    Customer Support

    Try this, adjust padding px accordingly:

    @media (max-width: 768px) {
        .generate-sections-inside-container {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    #679180
    Torsten

    Hi David,
    your values are changing the padding for the text, the logo is still centered.
    I tried to play with this,

    @media (max-width: 768px) {
     .site-header .header-image {
        vertical-align: middle;
    }

    but it doesn’t help neither, anyway it should be horizontal-align, right?
    I would need a left padding for the logo image on cell with the same value as the text below (10px) and logo image width set to 70%
    best,
    Torsten

    the value in Chrome/inspect:

    @media (max-width: 768px)
    <style>…</style>
    .fluid-header .inside-header, .header-widget {
        text-align: center;
    }

    if changing the value there from “center” to “left” it does what it should, I added the code

    @media (max-width: 768px)
    .fluid-header .inside-header, .header-widget {
        text-align: left;
    }

    in custom css, bad…

    #679191
    David
    Staff
    Customer Support

    Hi there,

    little unclear on whats expected, you have this CSS:

    @media (max-width: 768px) thorstenbuch:150:114.site-logo {
        padding-top: 10px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    Which is defining the width of the logo, so you could just change this from 100% to 70%. The site header defaults to text-align: center; on mobile. You will see this if you reduce the size.

    The padding on the header is also 10px as per the text, so what does this need to be?

    #679323
    Torsten

    Hi David,
    I hope the 2 screens in one file help:
    https://bit.ly/2xov5nL
    1. shows what it is
    2. shows what I want to achieve
    → header image aligned left with 10px left padding
    best,
    Torsten

    #679373
    David
    Staff
    Customer Support

    OK so maket he size adjustment above to 70% and then this CSS:

    @media (max-width: 768px) {
        .fluid-header .inside-header {
            text-align: left;
        }
    }
    #679399
    Torsten

    Top!
    That’s it.
    😉

    #679404
    David
    Staff
    Customer Support

    Awesome. Glad i could be of help.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.