Archived topic

Element Alignment

4 replies · Started by Paul on February 10, 2019

Viewing posts 1–5 of 5

February 10, 2019 at 2:45 am #806440

Hi,

What's the best method to keep all elements vertically aligned - top bar widgets, logo, primary nav, content, and footer widgets.

By default, the top bar widgets, logo, primary nav (via left/right link padding), and content do not align. See -

Below 1140px, while the logo and content are aligned, the top bar widgets and primary nav are not.
See -

How can I keep these elements aligned until the mobile layout is invoked below 767px?

Thanks,
Paul.

February 10, 2019 at 2:46 am #806442

Image links were stripped.

https://style960.com/gp-1.PNG

https://style960.com/gp-2.PNG

February 10, 2019 at 8:33 am #806703

Hey Paul,

Give this a shot:

@media (min-width: 769px) {
    .inside-header {
        box-sizing: border-box;
    }

    .inside-top-bar, 
    .inside-footer-widgets, 
    .inside-site-info, 
    .inside-navigation {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }

    .inside-navigation {
        padding-left: 20px;
        padding-right: 20px;
    }
}

February 10, 2019 at 11:15 am #806804

Hi Tom,

Perfect! Thanks for the quick reply :)

Paul.

February 10, 2019 at 7:10 pm #806972

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.