Chance image / text alignment in mobile

  • I have a website on WordPress and use the Graphene theme. In posts and pages, I align the images to the left and it appears properly on the desktop, but on cell phones (mobile/responsive version), due to the alignment and size of the screens, the post appears with the first words of the paragraph broken into a few letters on the side of the image, circling it lol… I would like to know if anyone suggests a CSS code so that in the responsive version the site does not align to the left, but to the center, putting an end to this problem… Because it is aligned to the left, the image ends up having some letters from the first words of the paragraph surrounding it… is there a way via CSS to cancel the alignment only in the responsive version? Thanks

Viewing 4 replies - 1 through 4 (of 4 total)

  • is there a way via CSS to cancel the alignment only in the responsive version?

    Sure, but we need the site address before we can offer such custom CSS code.

    Thread Starter Ralph SW

    (@ralphsolera)

    https://www.futmesaubatuba.com.br

    • This reply was modified 11 months, 1 week ago by Ralph SW.

    Perhaps a fancy way to do this would be to use JavaScript (instead of CSS) to dynamically switch the images’ alignment class from alignleft to aligncenter when on mobile devices. But that’s above my pay scale.

    For the CSS approach, try the following custom CSS. The 767px is your theme’s mobile breakpoint. This should also work for right-aligned images.

    @media (max-width: 767px) {
    img.alignleft, img.alignright {
        clear: both;
        display: block;
        float: none;
        margin: 0 auto;
        width: 100%;
} }

    Standing by for feedback!

    Thread Starter Ralph SW

    (@ralphsolera)

    Hello. Your solution fixed the problem with the text taking a letter next to the image, as it was before. However, to do this, now make the image occupy 100% of the width, which on a cell phone is fine, but not on a tablet, as the image is huge. It helped to partially solve the problem. It was better than it was before. But I will still have to think of another way to resolve this (new) situation. Thank you!

    • This reply was modified 11 months, 1 week ago by Ralph SW.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Chance image / text alignment in mobile’ is closed to new replies.