Archived topic
Content slides sideways out of frame on mobile
21 replies · Started by Carsten on January 31, 2019
It is something we are looking into to make the process easier - did you see my reply here:
https://generatepress.com/forums/topic/content-slides-sideways-out-of-frame-on-mobile/#post-799465
Thanks a lot David, it did the trick! - I wonder why this page reacts differently than other BP pages?
While you are logged in, could you please take a look at the members directory (medlemmer), why are the avatars slightly smalle in the left column than the right on mobile? It is actually also the case on desktop, but not as obvious.
(the obvious difference in avatar sizes is because avatars already uploaded are not affected by new avatar size settings)
This is from another topic, do you want me to ask my question here instead?
Regards
Carsten
They placed that element in a basic UL element, without any styling so it grabs the standard UL margin.
The padding to create the column gaps, but only added it to the left (odd) columns which makes that smaller. Try this to fix it on mobile:
@media (max-width: 500px) {
.grid.three>li:nth-child(odd), .grid.two>li:nth-child(odd) {
padding-right: 5px;
}
.grid.three>li:nth-child(even), .grid.two>li:nth-child(even) {
padding-left: 5px;
}
}
EDIT - just saw the other topic. Tom only added the padding to the left column :)
Thanks again, I'm glad I asked then, now the avatars and text are aligned :-)
One last question to the members directory to make it perfect. I got this code to make the bottom of the member cells aligned, which works great.
.buddypress-wrap .grid.bp-list>li .list-wrap {
min-height: 470px;
}
My question is how I remove all that inner padding below the text?
Regards
Carsten
Try adding this as well and adjust the min height to suit:
@media (max-width: 500px) {
.buddypress-wrap .grid.bp-list>li .list-wrap {
min-height: 270px; /* adjust to suit */
}
}
Thanks David, thats perfect.
You're welcome