Hey.

Having a problem in responsive mode, see:

What could be the problem?

Thank you.

[@casiepa Moderator 8 years, 10 months ago]

Hi,
That’s just some CSS. Is it a public forum ? please post a link.
Pascal.

[@mgsolidus Participant 8 years, 10 months ago]

Sure, here you go: Link

[@maxwell-waler Participant 8 years, 10 months ago]

Use % in width. Example: width:100%;
Also use height:auto; over-flow:hidden; clear:both; to this area/<div>
this will solve your problem.

[@mgsolidus Participant 8 years, 10 months ago]

Unfortunately that did not work, using this,

`.forum {
width: 100% !important;
height: auto;
clear: both;
}

[@anticosti Participant 8 years, 10 months ago]

I am having the same issue.
(https://wordpress.org/support/topic/feature-request-responsive-design?replies=1)

Here’s what I posted (edited):
Would be so great if bb style pack would support Responsive Design. When I browse my Forums on iPhone (portrait and landscape), the headers: ForumTopicsPostsFreshness (they all overlap horizontaly) making these unreadable and useless.

I have the feeling that using TABLES instead of DIVs and or UL, LI, in this case, would be very helpfull.

Using TABLES (th, tr, td) could play nice with a plugin like FooTables (Responsive Tables).

Kind Regards,

[@lionelhardesty Participant 8 years, 10 months ago]

I have read all replies and post, but i want to say that responsive is that issue, if you website is not properly open in smart phone or Iphone then that is the responsive issue.

[@anticosti Participant 8 years, 10 months ago]

I solved this issue (plus some others) on my side, by adding this CSS:
Hope this may help someone else….

 
input#bbp_search { 
  margin: 0.25em 0.25em 0.25em 0.25em;
}
li.bbp-header {
  margin-top: 0px !important;
  margin-bottom: 2px !important;
  border: solid 0px red !important;
}
/* START -- Main Effect on Forum width on small devices */
ul.forum-titles li {
text-transform: uppercase !important;
  font-size: 12px !important;
}
li.bbp-forum-info, li.bbp-topic-title {
    width: 40%;
}
li.bbp-forum-topic-count, li.bbp-topic-voice-count, li.bbp-forum-reply-count, li.bbp-topic-reply-count {
    width: 15%;
}
li.bbp-forum-freshness, li.bbp-topic-freshness {
    width: 30%;
}
/* END -- Main Effect on Forum width on small devices */

#bbpress-forums ul[id*='forums-list-'] {
  padding: 0px !important;
  border: solid 0px red !important;
  margin-bottom: 2px;
}
#bbpress-forums ul[id*='forums-list-'] li.bbp-body ul[id*='bbp-forum-'] {
  	padding: 10px !important;
    border: solid 0px red !important;
  	margin-bottom: 2px;
}
#bbpress-forums ul[id*='bbp-forum-'] {
border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -khtml-border-radius: 0px;
    -o-border-radius: 0px;
  	padding: 0px !important;
    border: solid 0px red !important;
  	margin-bottom: 2px;
}
#bbpress-forums ul[id*='bbp-topic-'].post-inner {
  border-radius: 0px 0px 0px 0px !important;
    -webkit-border-radius: 0px 0px 0px 0px !important;
    -moz-border-radius: 0px 0px 0px 0px !important;
    -ms-border-radius: 0px 0px 0px 0px !important;
    -khtml-border-radius: 0px 0px 0px 0px !important;
    -o-border-radius: 0px 0px 0px 0px !important;

}
#bbpress-forums ul[id*='bbp-topic-'] {
padding: 10px !important;
  margin-bottom: 2px;
  border: solid 0px red !important;
}

#bbpress-forums p.bbp-topic-meta img.avatar,
p.bbp-topic-meta span.bbp-topic-freshness-author a img.avatar {
  display: none;
}
	 

Kind Regards,

[@prancinghorse Participant 7 years, 9 months ago]

Does anyone know if this code still works? Also where do I post this to test it?

Thank you! 🙂

[@phamphuong792 Participant 7 years, 9 months ago]

Với quy mô và thiết kế đẳng cấp, các căn biệt thự, cửa hiệu hay liền kề của dự án Vinhomes The Harmony . Chắc chắn sẽ là sự lựa chọn lý tưởng và Xứng tầm đẳng cấp cho mọi khách hàng đang đi tìm cho mình một ngôi nhà mơ ước.
website: http://diachinhthon.vn

[@arusli Participant 7 years, 9 months ago]

i believe your theme css bypass responsive setting. find your theme css that especially control responsive css. could be in responsive.css. then find setting for:

@media screen and (max-width: 480px) {
  .my {
     display:inline-block
  }
}

and replace to:

@media screen and (max-width: 480px) {
  .my {
     display: block;
  }
}