SOLVED Vertically Center Particles Within a Section
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
Is there a method to vertically center particles along a section?
In the image shown, I removed the margin and padding for the logo so that made things a little better. But the other three particles seem to be aligned a little above center (the menu text, the top of the button, and the top of the facebook icon). There's a similar issue for the footer.
It's Gantry's Hydrogen theme for Wordpress, all the latest versions. - Last Edit: 6 days 5 hours ago by Southern Web Development.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21595
- Thanks: 3098
- messin' with stuff
-
Gantry uses Flexbox
You can use the Equal Height variation to set Flex on your Blocks then use the align-items property (custom css) to vertically center
developer.mozilla.org/en-US/docs/Web/CSS/align-items
css-tricks.com/almanac/properties/a/align-items/ - Last Edit: 1 week 2 days ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
It took a bit to figure out where to place that css code.
Here's what I copied after inspecting and testing the code:
.g-grid {
display: flex;
flex-flow: row wrap;
list-style: none;
margin: 0;
padding: 0;
text-rendering: optimizespeed;
align-items: center; <
this is what I added while testing
}
After placing it in the custom.scss file and saving, I tried stripping it down to just this:
.g-grid {
align-items: center;
}
Am I right to add only the override to the scss file as opposed to all the css shown when inspecting that element? Does it not matter?
I can understand the theory of the changes, but I'm not proficient enough to always apply the correct syntax in the right spot.
-
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
So I don't confuse anyone...
"this is what I added while testing" was supposed to be a notation for the purposes of this topic. It's not part of the css I used. I noticed it rendered differently in the forum as opposed to when I was composing my reply.
The code was just this:
.g-grid {
display: flex;
flex-flow: row wrap;
list-style: none;
margin: 0;
padding: 0;
text-rendering: optimizespeed;
align-items: center;
}
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21595
- Thanks: 3098
- messin' with stuff
-
Yes, you don't need to/want to duplicate existing values... it's just more/uncessary/duplicate CSS for the browser to load.
Just this:
.g-grid { align-items: center; }
would set ALL g-grid's to have their blocks set to "align-center" which you probably don't want. So instead create an additional selector that you can add to your Section's classes in Gantry like:
.g-grid.custom-center { align-items: center; }
and then you can add the Class "custom-center" (or whatever you want to name it) to the Section's Settings > Classes field to then center all the Blocks/Particles therein - Last Edit: 1 week 2 days ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
I see where my code applied vertical centering across all grids. I tried your code edit:
.g-grid.nav-center {
align-items: center;
}
I tried "nav-center" in the Section Class field and then the individual block Class field. But it reverted back to the original formatting after added the unique selector. Neither way worked.
However this did work:
#g-navigation .g-grid {
align-items: center;
}
-
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
#g-navigation .g-grid {
align-items: center;
}
If my way is correct, I'll mark this as solved.
Otherwise, I don't wish to leave bad code in the forum.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21595
- Thanks: 3098
- messin' with stuff
-
It is correct... but it will apply that to your #g-navigation section globally... my CSS was off a little, you can do it like this to only apply when you have a custom class on a section:
.custom-center .g-grid { align-items: center; } - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Southern Web Development
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
Thank you.
Your code will come in handy for other uses. Definitely saved me from a future question!
-
Time to create page: 0.043 seconds