[Resolved] Container Alignment Text vs CSS

Home Forums Support Container Alignment Text vs CSS

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #948337
    Paul

    Hi,

    I was given some CSS by Tom to align all content elements vertically before the ‘Container Alignment > Text’ option was added in the Customizer.

    When I use the CSS all options do align vertically except for sections – the inner container spans to the container width set in the customizer with no left or right padding applied. I’m not too worried about that, can be easily amended.

    But when I remove the CSS and use the text alignment option in the customizer, the primary menu doesn’t align vertically with the other content elements. See images below:

    https://style960.com/gp-css-900.JPG (css only customizer left on default boxes alignment – 900px)

    https://style960.com/gp-cust-900.JPG (css removed text alignment applied in customizer – 900px)

    https://style960.com/gp-cust-desktop.JPG (css removed text alignment applied in customizer – normal desktop width)

    Can this be corrected in an update?

    Thanks,
    Paul.

    #948339
    Paul

    First image linked to there has correct alignment.

    #948393
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The navigation likely still requires CSS if it’s transparent like that.

    If you can share the CSS I gave you, I can let you know which parts aren’t necessary anymore 🙂

    #949301
    Paul

    Yeah sure…

    @media (min-width: 769px) {
    .inside-header {
    	box-sizing: border-box;
    }
    .generate-sections-inside-container,
    .hero-home-page .inside-page-hero,
    .hero-page-title .inside-page-hero,
    .inside-footer-widgets,
    .inside-navigation,
    .inside-site-info,
    .inside-top-bar {
    	box-sizing: border-box;
    	padding-left: 40px;
    	padding-right: 40px;
    }
    .inside-navigation {
    	padding-left: 20px;
    	padding-right: 20px;
    }
    }
    #949302
    Paul

    The section and two hero parts I added myself there.

    #949389
    Tom
    Lead Developer
    Lead Developer

    Give this a shot instead:

    @media (min-width: 769px) {
        .hero-home-page .inside-page-hero,
        .hero-page-title .inside-page-hero,
        .inside-navigation {
    	box-sizing: border-box;
    	padding-left: 40px;
    	padding-right: 40px;
        }
    
        .inside-navigation {
    	padding-left: 20px;
    	padding-right: 20px;
        }
    }

    I’m not sure if you need the page hero stuff, either. Might be worth testing without it.

    #949950
    Paul

    The header is wider than all other content when I tried that. Box-sizing is still need for inside-header.

    #950182
    Tom
    Lead Developer
    Lead Developer

    Interesting, I’d need to see it to know why. Is that the only part that needed adjusting?

    #951329
    Paul

    As far as I could see yeah. If I can send admin details you could check yourself? Will move that CSS from the child theme into the admin panel.

    #951543
    Tom
    Lead Developer
    Lead Developer

    Shouldn’t need login details, just a link to the site should work (can edit your original post to provide the link privately).

    #955192
    Paul

    I’ve added the URL to the original question.

    #955531
    Tom
    Lead Developer
    Lead Developer

    Ah, that looks like it’s necessary because you’re aligning it with the page hero and sections. Good to know – thank you! 🙂

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