[Resolved] Mobile css not working

[Espen]

Hi,

I have a curious case where it looks like Generatepress mobile styles are somehow not being respected by the browser on mobile. It’s like the browser does not recognize that it’s on mobile and should be applying the mobile media styles.

One example is that left-aligned images are still being floated left on mobile because

.wp-block-image .alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

is overriding the

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

Inspecting it in Chrome, I can see the mobile code, but it’s overstruck, like the browser ignores it.

I’m hoping you can help me figure out why this is happening. Example URL is in private information.

Thanks

Espen

[David]

Hi there,

your mobile CSS is not specific enough.
Try this:

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

[Espen]

Hi David,

And thank you!

But I’m still quite confused because the non specific CSS is not mine, but your CSS from the file /themes/generatepress/assets/css/main.min.css?ver=3.1.3.

Shouldn’t this work “out-of-the-box” so that left-aligned images in the block editor get float:none by default on mobile?

I will add the more specific CSS code to my child them css file, but I can’t believe that this image float, text wrap issue is the intended behavior.

Thanks again!

Espen

[David]

Aah yes, its on our list to review.
Core blocks added there own more specific CSS. We’ll look to address that in a future update.

[Espen]

Okay, I understand.

Thank you for the help!

-Espen

[David]

Thank you for reminding us 🙂

[Author]

Posts