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

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

Home Forums Support alignleft and alignwide on smaller screen have float and margin

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1469696
    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

    https://jaimemartinez.nl

    #1469920
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1471283
    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 πŸ˜‰

    https://jaimemartinez.nl

    #1471844
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.