[Resolved] Mobile view help

[silver]

Hi guys,

Since Gutenberg was installed I had not made any changes to my website until recently.. I added some content to the homepage and when I checked mobile view I can see that the words are now squashed between the image on the left side, where before it used to show only the image and the text was either above or below (on mobile), any way to fix this?

Thanks for your time 🙂

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

I see that image is set to align right and this should be how it looks like on mobile:
https://www.screencast.com/t/ip87zTLzIx

Is that not what you see? Have you disabled Autopmize to test first?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Hey Leo,

Thanks for the reply 🙂

If you take a look at the ‘introduction’ page (I haven’t changed it since Gutenberg) the images there are also set to align right, however in mobile view, they are above or below content..which is the way I would prefer and how the homepage image was also previously.

Also just to let you know, the screenshot you provided is similar to what I see, except I see thinner content to the left of the image..almost one or two words per ‘sentence’ or line, so the text looks really squished, much more so that the screenshot you attached.

[Leo]

Hmm Gutenberg seems to overwrite the original style on CSS.

Can you disable Autopmize first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Hi Leo,

No problem, Autoptimize is disabled, same issue, unfortunately.

[Leo]

Yeah it looks like Gutenberg is using different style for align right and left.

Try this CSS:

@media (max-width: 768px) {
    .wp-block-image .alignright, .wp-block-image .alignleft {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Leo, that’s worked wonderfully, thank you so much 🙂

Should I add that to each page? (I’m adding content to all pages of my website so I assume the same issue will happen to each of them), or will it work for all pages if I simply add it to my main ‘simple css’ (under appearance).

[Leo]

Add it to the global editor should work 🙂

Then it will work on every page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Thank you very much once again Leo..and as I have said previously, this fast and high level of support is what separates generatepress from all the rest in my opinion.

Keep up the great work 🙂

[Leo]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts