[Theme : Customizr] bbpress topic not showing correctly en phone

Hi,

I got the same problem with bbpress on mobile devices.

The first topic is ok, but the other ones are aligned on the left, and the first letter on each new line is never displayed.

I made a screen capture

I don’t have the jetpack mobile theme enabled.

my forum is here.

Any idea ?

Regards
Goof

On the “official example” here, you see the problem as well :
The first topic column is centered (User avatar “Menaka”), the other first columns are aligned on the left (user avatar “Sahana”) and you can see the main text “Can you give more info about…” and “Bill Bradley […]” is not aligned with the first maintext (“Talk about Bill Bradley […] “).

Is it a CSS problem ?

Regards
Goof

“Official example” is => https://docs.presscustomizr.com/article/189-creating-a-bbpress-forum-with-the-customizr-wordpress-theme

??

@geek38

I made a fix. I have injected a part of a “functionnal CSS” into a the theme (I have created a child theme) => edit the file : wp-content/themes/customizr-child/style.css and paste this code :

* {
margin: 0;
padding: 0;
}

*,:before,:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a,
a:hover {

}

embed,
iframe,
img,
object,
video,button,
input,
select,
textarea,
.wp-caption {
max-width: 100%;
}

table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 4rem;
width: 100%;
}

img {
height: auto;
}

button,
input[type=”button”],
input[type=”reset”],
input[type=”submit”] {
background: #181616;

padding: 10px 16px;
font-size: 18px;
line-height: 1.33333;
border-radius: 6px;
display: inline-block;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
border: 1px solid transparent;
}
button:hover,
input[type=”button”]:hover,
input[type=”reset”]:hover,
input[type=”submit”]:hover {
background: #222;
}
input[type=”email”],
input[type=”password”],
input[type=”text”],
input[type=”search”],
textarea {
width: 100%;
height: 40px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;

background-image: none;
border: 1px solid #CCC !important;
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;

}
input[type=”email”]:focus,
input[type=”password”]:focus,
input[type=”text”]:focus,
textarea:focus {

outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}

/* WordPress */

.screen-reader-text {}

.avatar {
float: left;
margin-right: 25px;
}

.alignleft .avatar {
margin-right: 24px;
margin-right: 2.4rem;
}

.alignright .avatar {
margin-left: 24px;
margin-left: 2.4rem;
}

article.sticky h2:before {
content: “Featured: “;
}

img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
}

img.alignnone {
margin-bottom: 12px;
margin-bottom: 1.2rem;
}

.alignleft {
float: left;
text-align: left;
}

.alignright {
float: right;
text-align: right;
}

img.alignleft,
.wp-caption.alignleft {
margin: 0 24px 24px 0;
margin: 0 2.4rem 2.4rem 0;
}

img.alignright,
.wp-caption.alignright {
margin: 0 0 24px 24px;
margin: 0 0 2.4rem 2.4rem;
}

@geek38
I made a fix : I inject a part of a “functionnal” CSS (in a child theme) into the CSS file of Customizr

You can find it here :
https://www.fanselanchalon.fr/v3/wp-content/themes/customizr-child/style.css

??

Nice ! THanks for the fix.

I have 2 problems now with your fix :
Home page bug : screen here : https://hpics.li/8aa746a
reply on bbpress : screen here : https://hpics.li/8a454b1

on home page, we have a white circle…
on reply, all is small and send button is dark … :s

can you help me ? ??

The probleme is on computer version with your css fix ??

reload my fix on my website.
Search the “background” parameters and delete the line (or change this color)

??

Thanks for this ??

Still have the problem on the home page…

??

Hi !
I have modified my CSS : https://www.fanselanchalon.fr/v3/wp-content/themes/customizr-child/style.css

I hope it will be ok.