Profile problem

The @abdurhman is supposed to be to under the profile picture.

I suspect it has to do with the Right-to-Left language. I will try to replicate this on my dev server and get back to you soon.

Quick update:

I was wrong about the @abdurhman location. For the profile page, that is the correct position. It’s within the foum where it is under the profile picture.

I am not able to replicate the issue you’re experiencing.

It is displaying fine on my dev server:

I am looking at the source code on the link you provided to see if I can find where your site is breaking that layout. Possibly a theme issue, or custom CSS issue. I’ll update this topic if I find the source of your issue.

If you disable the extension, the problem disappears.
It appears activated.

Your issue is not a Style Pack issue. It is a combination of theme/template issues, and bad custom CSS applied in-line.

First, add these to the Custom CSS tab in Style Pack ( wp-admin/options-general.php?page=bbp-style-pack&tab=css ):

/* fix for profile page alignment */
#bbpress-forums .bbp-user-section {		
        clear: left !important;
}
body.rtl #bbpress-forums #bbp-user-body {
        margin-top: 2px !important;
}

Next, remove the inline style you have for .bbp-user-section in the profile template page. It should NOT have a top margin of -2000px. It should have no top-margin value at all.

If you are not able to remove the inline styling, then also add this to the Custom CSS tab in Style Pack:

.bbp-user-section {
        margin-top: 0px !important;
}

End result:

Marking as resolved, but feel free to ask questions if you still have issues.

thank you very much The problem has been resolved
I have another problem if you can help me?I asked in a forum and no one answered me
https://bbpress.org/forums/topic/problem-with-username/

I checked that topic, and checked your site. It seems to be displaying properly for me:

It seems that the problem was solved after adding the codes in your previous reply.

But there I discovered it now in the add-on with mobile browsing See it in the pictures:

Before activating the extension:

After activating the plugin:

• This reply was modified 1 year, 7 months ago by abuharon.
• This reply was modified 1 year, 7 months ago by abuharon.

The second picture is the correct one. That’s default bbPress behavior.

It’s called “responsive” display. bbPress does this by default so that the forum content looks good on mobile displays as well as desktop displays. If your site is not doing that even with Style Pack deactivated, then you have something wrong with the default bbPress template, or your theme, or a conflicting plugin.

The CSS code responsible for doing that is located in /wp-content/plugins/bbpress/template/default/bbpress.min.css

It uses a break point of 480px wide. Larger than that and it displays 2 columns. Smaller than that, it displays 1 column. There’s also “@media” breakpoints for 320px and 240px, with even more changes for smaller displays.

Your only real option is to write a lot of custom CSS to override the responsive functionality.

Take a look at:
/wp-content/plugins/bbpress/template/default/bbpress.css (lines 1408-1704)
&
/wp-content/themes/sahifa/css/bbpress.css (all throughout the whole file)

Those 2 files handle everything related to responsive display functionality. Whatever is in those 2 files wrapped in a “@media” query wrapper is what you will need to override with the CSS values “unset !important;” or “revert !important;” in order to prevent the default bbPress from being responsive.

I tried a lot and it didn’t work for me.I hope to help the codes are many and I can’t figure out which codes are responsible for that

What you’re asking for is not an issue with Style Pack, and will take many hours to re-write CSS code to accomplish what you want properly. Far beyond the scope of free plugin support for Style Pack.

I think the better question is: what’s breaking the default responsive styling in the first place?

Figure that out, and you may be able to replicate it without having to write hundreds of lines of CSS code.

If you can’t figure out what’s breaking the responsive functionality and then replicate that, a quick and easy solution would be to find all media queries and change them from this:

@media only screen and (max-width:480px) 
@media only screen and (max-width:320px)
@media only screen and (max-width:240px) 

to:

@media only screen and (max-width:1px) 

The 2 files you need to do this for are:

/wp-content/plugins/bbpress/templates/default/css/bbpress.min.css
&
/wp-content/themes/sahifa/css/bbpress.css

NOTE: This will make your site look really bad and hard to read on mobile devices, especially with small display screens. But that seems to be what you want. Maybe you could just make that 1px change to the 480px media query, but allow responsive functionality for 320px and 240px. Your site, your choice.

NOTE: You will lose those changes any time you update your theme or the bbPress plugin! You will have to reapply them any time you update the theme or bbPress. You may want to look into using a child theme so that your changes get preserved after theme updates. Not much you can do about bbPress overwriting your changes, so you’ll have to do them again to bbPress after updates. Good new is that bbPress updates are spread out, sometimes years apart so you won’t have to reapply that code change often.

• This reply was modified 1 year, 7 months ago by codejp3. Reason: updated file paths to edit

@codejp3
Try it now
I made some adjustments

I see the responsive functionality still happening at 480px break point:

One thing I do see is that the role is not aligning with the rest of user profile info when displaying responsively. It’s working fine on my development server, but not on your site (again, something weird with the template styling or theme?).

To get the user role to align with the rest of the user profile info, you can add this CSS snippet to your Custom CSS tab in Style Pack:

/* profile role alignment fix for responsive display */
@media only screen and (max-width:480px), @media only screen and (max-width:320px), @media only screen and (max-width:240px) {
		#bbpress-forums div.bbp-forum-author .bbp-author-role > *, #bbpress-forums div.bbp-topic-author .bbp-author-role > *, #bbpress-forums div.bbp-reply-author .bbp-author-role > * {
				text-align: left;
		}
} 

If you do end up removing responsive display for the 480px width, just remove “@media only screen and (max-width:480px),” from the code above.

Try it now
I use a sahifa template
https://themeforest.net/item/sahifa-responsive-wordpress-news-magazine-newspaper-theme/2819356

• This reply was modified 1 year, 7 months ago by abuharon.
• This reply was modified 1 year, 7 months ago by Jan Dembowski. Reason: Removed affiliate link, please do not post that

I see the code snippet I provided fixed the role alignment when hitting the 480px width and smaller responsive display.

I also still see responsive single column display for the 480px width break-point which seemed like the main thing you wanted to change in the first place.

I do see lots of new footer sections added.

What am I supposed to be looking for?