• Start Here
  • Blog
    • Blogging
    • SEO
    • Themes
    • Plugins
    • Hosting
  • Tutorials
    • Create A Website
    • Start A Blog
    • WordPress SEO
    • Speed Up WordPress
    • WordPress Security
  • Tools
    • WordPress Hosting
    • Caching Plugins
    • Security Plugins
    • Comment Plugins
No Results
View All Results
GigaPress
  • Start Here
  • Blog
    • Blogging
    • SEO
    • Themes
    • Plugins
    • Hosting
  • Tutorials
    • Create A Website
    • Start A Blog
    • WordPress SEO
    • Speed Up WordPress
    • WordPress Security
  • Tools
    • WordPress Hosting
    • Caching Plugins
    • Security Plugins
    • Comment Plugins
No Results
View All Results
GigaPress

How To Fix WordPress Mobile Image Alignment & Text Wrap Problems

Brad Merrill by Brad Merrill
6
How To Fix WordPress Mobile Image Alignment & Text Wrap Problems
Share on FacebookShare on Twitter

Left- and right-aligned images look beautiful on desktop browsers, but sometimes with responsive WordPress themes you end up with something like this:

Yuck.

Because of the skinny portrait-style image, the text is wrapping improperly on mobile, and it looks like a mess.

Very frustrating, but with a couple of lines of CSS, we can clear this right up.

The approach I’ve found most effective is to automatically center your left- and right-aligned images on smaller screens.

To do this, open up the stylesheet for your child theme, or the Custom CSS section of the theme Customizer, and drop in the following code:

@media only screen and (max-width: 600px) {
	figure.alignleft, img.alignleft, figure.alignright, img.alignright {
	float:none;
	display:block;
	margin-left:auto;
	margin-right:auto;
    }
}

The logic here is simple: on screens with a width less than 600 pixels, images aligned to the right or left (via WordPress’s default style classes) will be centered via float:none, margin-left:auto, and margin-right:auto. (Feel free to modify the max width to suit your needs.)

The result? The image in the example above now appears centered on smartphones, but still perfectly right-aligned on larger screens:

Much better!

I hope this helps! If you have any questions, please feel free to leave them in the comments below.

Previous Post

How To Fix WordPress Images That Won’t Align Properly

Next Post

WordPress SEO Tutorial: The Complete Guide To Higher Rankings

Brad Merrill

Brad Merrill

Brad Merrill is the CEO of Merrill Media and Editor in Chief of GigaPress.

Next Post
WordPress SEO Tutorial: The Complete Guide To Higher Rankings

WordPress SEO Tutorial: The Complete Guide To Higher Rankings

  • Avatar Chris Duke says:
    at

    Holy cow… thank you. I can’t believe how well this worked and how simple it was to implement. A virtual high-five! 🖐

    Reply
    • Avatar Brad Merrill says:
      at

      No problem Chris, glad to hear it helped you out! 🖐

      Reply
  • Avatar CJ Roberts says:
    at

    Thanks for the snippet. This should really be the default behavior.

    Reply
    • Avatar Brad Merrill says:
      at

      I agree! Some themes handle it better than others.

      Reply
  • Avatar Rob says:
    at

    This did exactly what I needed, thanks so much

    Reply
    • Avatar Brad Merrill says:
      at

      No problem!

      Reply
  • No Results
    View All Results

    Join The Community

    Be the first to see the latest WordPress tips, tricks, tutorials, and reviews from GigaPress.

    GigaPress is free and reader-supported. When you make a purchase through one of our links, we may receive a commission at no additional cost to you.

    Essential Resources

    How To Create A Website: Step-By-Step Beginner’s Guide
    Tutorials

    How To Create A Website: Step-By-Step Beginner’s Guide

    December 9, 2020
    How To Start A Successful Blog In 2021: The Definitive Guide
    Blogging

    How To Start A Successful Blog In 2021: The Definitive Guide

    December 13, 2020
    How To Speed Up Your WordPress Site: The Only Guide You Need
    Tutorials

    How To Speed Up Your WordPress Site: The Only Guide You Need

    April 3, 2020
    WordPress Security: The Complete Step-By-Step Guide
    Security

    WordPress Security: The Complete Step-By-Step Guide

    August 13, 2019
    WordPress SEO Tutorial: The Complete Guide To Higher Rankings
    SEO

    WordPress SEO Tutorial: The Complete Guide To Higher Rankings

    July 19, 2019

    Get The Newsletter

    Join our newsletter to get the best WordPress tips and tutorials every week.
      GigaPress

      © 2021 GigaPress
      A Merrill Media Publication

      Site Links

      • Start Here
      • Tools
      • About
      • Contact
      • Privacy

      Follow Us

      No Results
      View All Results
      • Start Here
      • Blog
        • Blogging
        • SEO
        • Themes
        • Plugins
        • Hosting
      • Tutorials
        • Create A Website
        • Start A Blog
        • WordPress SEO
        • Speed Up WordPress
        • WordPress Security
      • Tools
        • WordPress Hosting
        • Caching Plugins
        • Security Plugins
        • Comment Plugins

      © 2021 GigaPress
      A Merrill Media Publication

      Welcome Back!

      Login to your account below

      Forgotten Password?

      Create New Account!

      Fill the forms bellow to register

      All fields are required. Log In

      Retrieve your password

      Please enter your username or email address to reset your password.

      Log In

      Session expired

      Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.

      >