Content overlaps issue on mobile device

[pitamdey]

URL : ​https://codex.buddypress.org/
In Responsive the screen below 500px the content overlaps on each other

[pitamdey]

Screenshot for better understanding

[pitamdey]

After applying this solution the issue resolved

[pitamdey]

I think we can add class to the Component, Version, Type and Context instead of applying inline css and then apply width according to the media query as the media query above 500px the width should be same i.e. 24% but after that it should be 50% that will make the design proper in responsive
something like this :

.class{
width: 24%
}
@media only screen and (max-width: 600px) {
.class{
width: 50%
}
}