- This topic has 9 replies, 2 voices, and was last updated 4 years, 1 month ago by
Tom.
-
AuthorPosts
-
January 19, 2017 at 11:31 am #265864
Mitch
Using dev tools to see my site on different device sizes, I noticed that in landscape (800×600) and portrait (768×1024), the sections become very small in vertical height, and the content bleeds into other sections.
Also, I haven’t been able to vertically align content within its row using
vertical-align:middle
. See the second section down for an example. Any ideas?January 19, 2017 at 4:55 pm #265943Tom
Lead DeveloperLead DeveloperInteresting, can you try adding this after all of your columns at the end of the section?:
<div class="clear"><!-- clear --></div>
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 20, 2017 at 6:15 am #266165Mitch
That seems to work. Thanks! Can you explain what that code is doing?
Also, I’ve still got the alignment issue at those screen sizes.
January 20, 2017 at 10:04 am #266232Tom
Lead DeveloperLead DeveloperThe code clears the floats of the columns.
What kind of alignment issues are you having?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 20, 2017 at 10:33 am #266244Mitch
In the first section below the header, I would like the image and text to be vertically aligned to the middle of the section. Right now, I’m using padding, but it doesn’t work well on the larger table sizes I mentioned earlier. I tried using style in the column shortcode and in a div with no luck.
January 20, 2017 at 9:57 pm #266414Tom
Lead DeveloperLead DeveloperVertical centering is very difficult to do.
Padding is the best cross-browser way to do it.
Otherwise you would need to look into using Flexbox, which is still relatively new and hard to accomplish.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 22, 2017 at 4:10 am #266772Mitch
hm… would it be possible to nest 3 rows and have my content in middle row? Then I could make the blank rows not visible on mobile. I tried that with the unsemantic documentation, but could only nest columns.
January 22, 2017 at 11:41 am #266844Tom
Lead DeveloperLead DeveloperYou would have to use the grid HTML instead of the shortcodes to nest them.
You would always just using margin-top to center it and apply it only on desktop.
For example if you gave your grid a class of
desktop-margin
.@media (min-width: 769px) { .desktop-margin { margin-top: 30px; } }
Then adjust the 30px to whatever works for you.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 23, 2017 at 9:11 am #267100Mitch
Thanks!
January 23, 2017 at 9:29 am #267118Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.