CSS for global responsive width

AI-generated summary

Global Responsive Width CSS Issue

rkaplan is trying to make their entire site responsive by adjusting the width to fit the full window size. However, the post content remains at a fixed width despite attempts to override it.

dax suggests overwriting the .topic-body CSS rule from width: calc(690px + (11px * 2)); to width: 100%; to resolve the issue. However, this may impact the timeline on the right. An example of a site with a similar layout is provided: https://www.gamekult.com/forum/

rkaplan thanks dax for the suggestion but notes that the global CSS changes have unintended effects, requiring a more nuanced approach. dax agrees, emphasizing the complexity of modifying the layout width and the need for media queries to adapt to different device sizes.

I am trying to configure CSS for my entire site to be responsive in with i.e. for the width to adjust to the full width of the current window.

I know these entries represent brute force and are not particularly elegant. That said, it actually works well for just about every aspect of the site, including the window to create/edit a new post.

However, the actual post content itself - which appears to be in a CSS element called css.coked - remains at a fixed width no matter how I attempt to override it. What can I do so viewed posts also expand to the window size?

  • {max-width: 100% !important };

div.cooked {max-width: 100% !important };

div.cooked {width:2000 !important };

p {max-width: 100% !important };

You need to overwrite

.topic-body {
    width: calc(690px + (11px * 2));
}

so try

.topic-body {
    width: 100%;
}

However you need to think how to handle the timeline on the right using a width of 100%…

See this site as example:

Thank you

I see there are a number of other of unintended effects of the other global CSS changes so I need to rethink this or be more nuanced in the edits I make.

Yes, it’s not so simple to modify the layout widht. The elements that are impacted are many and consider that you must do a lot of work with the media queries to adapt the changes to devices of all sizes.