Increasing post width with CSS?

[hashOK]

In my forum,
1.I have an ample amount of space to use it for extending the post created by user.It rather looks clumpsy now.I want to utilize the space so that the post looks good,like the homepage is screen friendly using code:

@media screen and (min-width: 1400px) {
  .wrap { max-width: 1500px; }
}

I want the post to be such
eg.

Please suggest how to do this

[hashOK]

Any suggestion will be helpful

[Pad_Pors]

not a developer, but i think this may help:

https://meta.discourse.org/t/material-design-for-discourse/28864

[featheredtoast (Jeff Wong)]

My forum slightly increases post size by:

.topic-body{
  min-width: 65%;
}

You can adjust as needed.

[Tom_Newsom]

Consider readability before making it too wide:

http://baymard.com/blog/line-length-readability

[rewphus]

I ended up going 75% because we are a very media heavy site. That’s the great part about Discourse, you can make it whatever you want it to be as long as you make sure it doesn’t conflict with other elements on the page.

[featheredtoast (Jeff Wong)]

I had 75 originally but line breaks in the “reply by new topic” button looked really weird, along with the topic links in the gutter.

I think the team has plans to move the topic links below the posts and clear out the gutter in a later release, but until then just be mindful of the gutter content.

[jord8on (Jordan)]

Brilliant! Thank you for this snippet!

I changed my Topic Body as follows (by adding to my CSS):

.topic-body {
  min-width: 80%;
}

After switching to 80%, I noticed that the Topic Timeline scrunches over the Topic Body starting at 1260px, until the time when it naturally disappears for mobile (maybe 800px?)

See Screenshot of problem

So I added this little snippet to my CSS to remove the timeline when the screen size shrinks below 1260px…

@media screen and (max-width: 1260px) {
  .topic-timeline {
    display: none;
  }
}

Works like a charm now!

[Alex_P]

أعتقد أن شيئًا مثل هذا أكثر منطقية:

@media screen and (min-width: 1260px) {
  .topic-body {
    min-width: 80%;
  }
}

[jord8on (Jordan)]

لم أجرب هذا، لكنني أظن أنك محق! أسلوبي في CSS ليس دائمًا الأفضل! مجرد تجربة بعض الأساليب المختلفة حتى أتمكن من جعل الصفحة تفعل ما أريد! أعمل حاليًا على بناء مجتمع جديد. إذا انتهيت برغبتي في نفس الشيء، فسأعود لأخبركم عن كيفية سير الأمور! شكرًا لتدخلك بحل آخر (ربما أفضل)!

[Alex_P]

إليك أيضًا مكون السمة الخاص بي مع هذا CSS. إنها الطريقة الموصى بها الآن لتجنب تعديل جميع السمات يدويًا.

GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width

[Alex_P]

لقد قمت بإعادة هيكلة هذا المكون وتوسيعه.

الآن يتم تحديد الحجم بالبكسل (px) بدلاً من النسبة المئوية (%) لتجنب الالتباس ولتمكين استخدامه في أماكن أخرى.

.topic-post:not(.d-toc-post) .topic-body {
  width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}

أول جزأين من المجموع هنا مأخوذان من SCSS القياسي الخاص بـ Discourse.

هناك بعض التحسينات البسيطة في واجهة المستخدم مثل زيادة حجم الفواصل ومنشورات إجراءات المشرفين أيضًا، وتم تعطيلها الآن في منشورات DiscoTOC لأنها تتصرف بشكل غريب هناك.

أيضًا، أضفت خيارًا لزيادة العرض الأقصى للمحرر لجعل المعاينة تتطابق مع عرض المنشور. ليس بنفس العرض تمامًا، لكن النسخة القياسية تعاني من نفس المشكلة.

[Paracelsus]

رائع جداً يا @Alex_P. إذا أمكنك جعلها تعمل مع سمة Material Design، فسيكون ذلك رائعاً. المشكلة هناك هي أن الصورة الشخصية على يسار المنشور تنتقل من الجانب إلى أعلى المنشور نفسه.