Tab content overlaps with sidebar

[dsniche]

There’s a problem with my Profile tab on the Profile page. The text goes too far to the right and touches/overlaps the sidebar. When compared to the section title, it’s obvious that the text of the profile fields goes further to the right.

I’m attaching screenshots to show what’s happening.

How to fix this?

Thank you in advance.

[dsniche]

Okay, I’ve been looking at this problem more closely and now it seems more like a sidebar problem than text alignment problem.

When I opened Settings > Capabilities, the sidebar migrated to the center of the page. It also moved down to just below the content of the Capabilities tab.

I attached a screenshot as this may be difficult to imagine just from my description.

Also, from the first sidebar item (Adsense in this case) and all the way down, the display seems to be for the mobile version of the site even though I accessed the page on desktop. The top portion of the page all the way down until the bottom of the “Capabilities” tab has desktop display. Only the sidebar is mobile display.

I also attached a screenshot of this problem. You can see in the second picture that the top floating menu fills the entire width of the screen display like it should on desktop, but the bottom footer only fills a small portion of the width of the screen the way it usually shows up on mobile.

[Laura]

Hello, how do you want it to look like? I can do some css adjustments for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Hi Laura,

I want the sidebar to always stay on the side where it doesn’t touch the main content.

And I want the desktop/mobile display to be consistent, as in the entire page should be either desktop or mobile display, but not combined.

I also just checked the display on mobile and the profile section (the bottom one in the white Buddypress tabs area) isn’t displaying correctly either. When I expand the profile tab with more content, it spreads beyond where the mobile display should end. It’s hard to describe here so I took a couple of screenshots.

Thank you for your help.

[Laura]

Hello, i can check it out, please share login credentials and i will build some css codes for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Thank you so much Laura. Login credentials:
username: yeschildfree
password: Tq9owxyk

[Laura]

Hello, what device are you using to view it? And which profile? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Hi Laura, I was using a laptop and the admin profile. The browser was Chrome.

I just made the window smaller and that was what showed up on screen. I didn’t have to change the window size from full screen to see the text from the profile fields bleeding into the sidebar though.

[Laura]

Hello, try using a mobile phone, because to test mobile view the best is with a mobile! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Hi Laura,

There’s the same problem on the profile page when I opened it with Safari on an iPhone. It’s the same on any profile, just scroll down to the profile details section and expand the tabs.

On desktop there’s still the problem of the profile section text bleeding into the sidebar. This is not a problem on mobile because the sidebar is not actually beside the profile details on mobile.

Thank you.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Radu]

Hi,

Please tell me if in the demo you see same issues,

If not it means that one of your plugins can cause this or some customizations from child theme, so try to de-activate it and check again.

Let me know

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Hi Radu, thanks for the response. How do I see how the theme would look like in demo?

[dsniche]

Hi Radu,

After looking more closely into the problem…it seems the cause is the code that I added to have the questions and answers on separate lines.

So instead of:
Age 20
Location San Antonio, Texas

It’s now:
Age
20
Location
San Antonio, Texas

I did this using the following code:

COPY CODE

#buddypress div.profile .dl-horizontal dt {
    width: 100% !important;
    text-align: left !important;
}
#buddypress div.profile .dl-horizontal dd {
    margin: 0 auto !important;
}

Apparently a side effect of this is the text bleeding into the sidebar.

How do I keep the text contained and not overlapping with the sidebar?

I tried adding padding, but it only worked for the Answers. The Questions still bleed into the sidebar even if I add padding.

Actually even before I added the code above, the Questions on mobile go past where the mobile view should go, messing up the entire page layout. I’m attaching a screenshot to show what I mean. The screenshot is of mobile view before I added the code above.

[Radu]

Hi,

Just add this CSS to quick CSS area

COPY CODE

@media(max-width:700px) {
.accordion-content { float:none !important; }
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Hi Radu, thank you that keeps the mobile view from going past the limit on the right. But now the questions are cut off, only one line of each question is displayed. I attached a screenshot to show what it looks like.

[Radu]

For removing … use this css

COPY CODE

#buddypress div.profile .dl-horizontal dt {

    text-overflow: initial !important;
    word-wrap: normal !important;
    white-space: initial !important;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[dsniche]

Many thanks! 🙂

[Radu]

No problem

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts