[joshua]

I’ve got a couple of troubleshooting issues with my site that i have not been able to fix on my own since the new Gutenberg release. They mostly show up when viewing the site on cell phones. Any chance anyone on here knows what to do?

1) Right and Left aligned pullquotes look great on a computer and some phones, but on larger phones you get this tiny stream of text to the side of the quote. Basically I want them to be rt or lft aligned on a computer and fullscreen on a phone. I know that I need to adjust the media queries in order to make the pullquotes responsive, but idk if that’s something I do for the whole site, or if there’s a pullquote specific CSS I need to find, or if I will have to add a shortcode everytime I add a pullquote to a post. This is something I need to learn to fix myself, especially if it’s something that will affect the input of every post.

2) Em dashes show up in titles when the screen is resized (esp longer titles, and often used in a gramatically incorrect way). They are annoying and unprofessional looking. Is there a way to make them go away just for titles?

3) (less critical) it would be nice if I could add full width images (alignwide and alignfull) in the gutenberg editor. I don’t think my theme supports that is there a way to code around it or should I just leave that alone?

If anyone has any advice for me that would be awesome.

[joshua]

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.

[Skandha]

@joshua: Please post in your site URL so that I can look into the issues you mentioned.

Kind Regards,
Skandha

[joshua]

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/

[Skandha]

@joshua: Hello Joshua,
I still can’t replicate the issue you are having at my end. Could you attach me a screenshot of the issue so that I can help solve it for you?

Kind Regards,
Skandha

[Author]

Posts