CSS for global responsive width

support
#1

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 };

image
image.png6096Ă—3042 1.17 MB

#2

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%…

image
image.png1909Ă—795 58.2 KB

See this site as example:

4 Likes
#3

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.

1 Like
#4

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.

3 Likes