padding and menu setting for screen size for tablet and cell

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 */
    }
}

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

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

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

Try this, adjust padding px accordingly:

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

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...

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?

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

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

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

Top!
That's it.
;-)

Awesome. Glad i could be of help.