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

[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

[David]

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

[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

[David]

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

[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

[David]

Try this, adjust padding px accordingly:

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

[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…

[David]

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?

[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

[David]

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

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

[Torsten]

Top!
That’s it.
😉

[David]

Awesome. Glad i could be of help.

[Author]

Posts