Archived topic
Container Alignment Text vs CSS
11 replies · Started by Paul on July 3, 2019
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.
First image linked to there has correct alignment.
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 :)
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;
}
}The section and two hero parts I added myself there.
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.
The header is wider than all other content when I tried that. Box-sizing is still need for inside-header.
Interesting, I'd need to see it to know why. Is that the only part that needed adjusting?
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.
Shouldn't need login details, just a link to the site should work (can edit your original post to provide the link privately).
I've added the URL to the original question.
Ah, that looks like it's necessary because you're aligning it with the page hero and sections. Good to know - thank you! :)
