[Resolved] alignleft and alignwide on smaller screen have float and margin

[Jaime Martinez]

As the title say: If you align an image to the right through the “align functionality” then it gets the CSS class alignright or alignleft and this rule kicks in.

`
.wp-block-image .alignright {
float: right;
margin: .5em 0 .5em 1em;
}
`

My opinion: Add a media query around it, or else the image gets white space left or right on smaller screen.

Now I have added a max-width media query to discard this margin on smaller screens. See https://xvm-coaching.com for an example.

Hope you share this opinion 😀

Kind regards,

Jaime Martinez

[Leo]

Hi there,

Thanks for the suggestion!

In my opinion, this is really up to the user to add the CSS (which we are happy to help) when needed.

I’ve seen users with smaller images and still prefer them to float left/right.

We will definitely consider it if the request comes up more often.

Thanks again 🙂

[Jaime Martinez]

Yes and no, but ok. From a accassiblity / readability point of view, super small / cramped up text is not readable. And GeneratePress focusses on accassibility, right?

For those you need the CSS here it is:

`

@media screen and (max-width: 567px) {

.wp-block-image .alignright {
float: none;
margin-left: 0;
}

.wp-block-image .alignleft {
float: none;
margin-right: 0;
}
}
`

Change the 567px to something you’d like 😉

[Leo]

Thanks for sharing!

[Author]

Posts