How to increase width of topic

Normally, topic look like this. Not as large as I want.

So, I wrote this code to increase the width :

.topic-body {
    width: 830px;
}

To make it look like this :

But when my screen is smaller, it looks like this :

How to avoid this?

The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:

.timeline-container {
  margin-left: 757px;

  @media all and (min-width: 1140px) {
    margin-left: 820px;
  }
  @media all and (min-width: 1250px) {
    margin-left: 900px;
  }
}

So I think you’d either want to reduce the topic width for smaller screens, or increase the margin-left of the timeline-container a bit.

Another difficulty you might run into is when we switch from the timeline to the progress bar at smaller browser widths… because that switch is determined in JS so it’s more involved than just updating the CSS.

33%20AM

I think eventually we’d want the layout to be more flexible so it would be in the right position automatically if the topic column width is different, but for now it’s a manual adjustment at a few breakpoints.

9 Likes

Hi, stumbled upon this since it has been a request from our users.

Wouldn’t it work to just use the same kind of rules on the topic.body rule?

Instead of this:

  .topic-body {
        width: 830px;
    } 

Could it be like, for instance:

    .topic-body {
        width: 727px;
      @media all and (min-width: 1140px) {
        width: 790px;
      }
      @media all and (min-width: 1250px) {
        width: 870px;
      }

    } 

This way the topic width would always go along with the timeline margin width.

I use a wider screen on my themes. It’s mixed in with a bunch of other stuff but I think I extracted all the widescreen stuff for just the topic posts page into this component, which should be easy enough to edit to get whatever max-width you want.

If you want the header width to stay consistent and not go wider on the topic posts page, then remove
, .archetype-regular .d-header .wrap from line 20

It uses 90px avatars so if you want 45px just delete the head_tag.html and these lines at the end of the css

.topic-avatar {
  width: 90px;
  .avatar {
    width: 90px;
    height: 90px;
  }
}
.embedded-posts .topic-avatar {
  width: 45px;
  img.avatar {
    width: 45px;
    height: 45px;
  }
}