Site logo

Archived topic

Content slides sideways out of frame on mobile

21 replies · Started by Carsten on January 31, 2019

Viewing posts 16–22 of 22

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?

https://imgur.com/a/77Tm4CV

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

This archived topic is closed to new replies.