Archived topic

Header widget & Logo vertical alignment

8 replies · Started by Tom on November 30, 2017

Viewing posts 1–9 of 9

November 30, 2017 at 12:20 am #438519

Hi Tom & crew,

I apoligize if this has already been answered elsewhere, but I'm struggling to get the code right for this one.

I'm trying to achieve center vertical alignment with my logo and header widget in the mobile responsive view. I'm also trying to remove unnecessary padding between the menu, the header-widget, and the logo.

I've managed to get the widget below the logo using code from other support requests, but I can't figure out what the rest (what I mentioned above).

Thanks in advance,
Tom

November 30, 2017 at 12:28 pm #439033

Hi there,

Give this CSS a try:

@media (max-width: 768px) {
    .inside-header > * {
        margin-left: auto;
        margin-right: auto;
    }
}

November 30, 2017 at 12:41 pm #439045

Perfect! That's center aligned everything :-)

How about reducing the padding/margin between the call us and the menu?

Cheers,
Tom

November 30, 2017 at 1:22 pm #439076

Try this:

@media (max-width: 768px) {
    .inside-header>:not(:last-child) {
        margin-bottom: 0px;
    }
}

November 30, 2017 at 3:50 pm #439161

Amazing! That has worked. Thank you :-)

Question unrelated to my site, how would recommend I brush up on my CSS & HTML skills so I can solve problems like these when they arise?

Sorry if that's a loaded question!

November 30, 2017 at 5:27 pm #439202

We just use inspect element/developer tool from the browser :)

I learned the basics from this website: https://www.codecademy.com/

November 30, 2017 at 5:39 pm #439203

Thanks Leo - appreciate the advice :-).

November 30, 2017 at 5:39 pm #439204

Resolved

November 30, 2017 at 5:56 pm #439215

No problem!

This archived topic is closed to new replies.

Start building better websites today.