How can i increase the width of a single post

Product Support

AI-generated summary

The user TheBestPessimist is seeking to increase the width of a single post (topic ID 1094) on desktop view, aiming to improve the display of a wide table. They’ve attempted CSS solutions to widen the post and adjust layout elements like font size and margins, but face challenges in targeting the specific post without affecting others. tophee questions whether widening the post is the best solution, suggesting the core issue may be poor scroll visibility of the table rather than width. TheBestPessimist acknowledges the difficulty, noting that CSS targeting the timeline scrollbar for just one post is problematic due to the lack of context in the .timeline-container class. They share their current CSS and express a desire for a cleaner solution that avoids reducing font size or misaligning elements.

1

I know there are multiple topics talking about this, but i am interested in making a single topic (which has a larger/wider table and can be seen here: Passwords, credentials and environment variables - How-to - Duplicacy Forum) a little bit wider, at least on the desktop view.

I intend to create a theme component for this, but i don’t know how to target that specific post.

Yes, i do imagine it will look ugly with only 1 post. Maybe i will have to increase the width of the whole topic, but nothing more than that.

I also know that i could merge table columns:

image
image979×170 7.01 KB

but let’s be honest, that just doesn’t look as good as having the table with 4 columns.

References to other topics with this issue:

Solution:

It’s not as easy as i hoped, as you can see in post 3, but here’s what i did so far:

  • widen it (the post) a little bit
  • decrease font for the table
  • move everything a bit to the left

Not beautiful but not that ugly either.
I’m more than happy to get a better/cleaner alternative. eg. i would really like to be able to move the timeline scrollbar more to the right and not decrease table font size, but oh well :-s.

section[data-topic-id="1094"] .row {
  // background-color: yellow;

  margin-left: -100px;
  
  .md-table {
     // background-color: pink;
     font-size: 80%;
  }
  
  .topic-body {
    width: 80%;
   }
}

//   .timeline-container {
//         background: yellow;
//         left: 360px;
//     }
2

The first question is, perhaps, whether the solution, at least in the case of a table, is to widen the post. Even if it were possible, I’m not sure this would look any good.

In my eyes, the issue here (both on desktop and mobile) seems to be that the scrollability of the table is not always evident to the user. And changing that shouldn’t be too difficult (though I don’t have a solution).

Scroll bars would definitely be ugly but perhaps there are other ways of hinting at the hidden part of the table?

3

I’m starting to get the feeling that this isn’t possible (or at least not easily)
since .timeline-container does not know what post we are in, therefore i can’t move it sideways only for that specific one post section[data-topic-id="1094"]

image
image1920×1200 484 KB

Anyone has any opinions on this?

Note, here’s my current css:

section[data-topic-id="1094"] .row {
  margin-left: -100px;
  
  
  .topic-body {
    width: 90%;
   }
}

.timeline-container {
    background: yellow;
    left: 360px;
}