Resizing/Responsiveness issues

Okay I figured out a patch of sorts for part of it:

I added this CSS:

p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
word-wrap: normal;
-webkit-hyphens: manual;
-ms-hyphens: manual;
-moz-hyphens: manual;
hyphens: manual;
}

It solves my em-dashes problem, and on phones I no longer have that stream of text to the left and right of my pullquotes. Unfortunately even messing with media queries for hours I wasn’t ever able to figure out how to make rt and lft aligned pullquotes centered/ fullwidth on small screens, so they do look a little weirdly off center. Also, when i test it by reducing the width the web browser, I do get stray words floating on one side or the other. It’s ugly but at least it’s better than the incomprehensible text i was getting before.

I haven’t figured out how to make images full width inside a post either (like when you get a cool image that extends past the borders of the page and breaks things up in online articles). WordPress calls them cover images even though they’re inside your post, but I guess they can only go full width on certain themes.

Here’s an example of a post. I fixed much of the problem.

Adjusting the width of the window, there are certain lengths where words float next to the pullquote. it’s far better than before when on my phone there’d be just a stream of 2-letter pieces of words. I was hoping to preserve the right and left alignment of pullquotes on a PC, but have them be fullscreen on a phone. It’s okay right now, but you can tell that some are more to the left and others to the right.

I was hoping to make the final image extend across the whole screen.

https://www.nerdempire.org/the-killer-10/