Changing image aligned right to center on mobile

  • The first image in my blog post (linked below) is right-aligned. While it looks great on desktop with the text wrapped, it does not look good on mobile—the first word of the wrapped paragraph is completely separated from the rest of it.

    So, to resolve, I am trying to “center” the image defined by .wp-image-1192 on mobile views only (and can obviously assign a second class to it for this purpose). I tried what I know, and I think the WP caption is interfering with the code’s ability to render, however I don’t want to delete the caption, either. (I have my @media tag defined, just need the individual code for this issue.)

    The page I need help with: [log in to see the link]

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

  • Its looklike ok, fixed?!
    Ok i saw it, look like you need a @media as this:

    @media only screen and (max-width: 850px) {
  .wp-image-1192{
    display: block;
  margin-left: auto;
  margin-right: auto; 
  }
.alignright {
}
}

    Im with mobile so icant test it. Simple use google chrome consol and test styles, its looklike the alignright should be not for mobile device and for a centered image a block display in mobile is easy and enough.

    Thread Starter ditryblog

    (@ditryblog)

    this code does not work.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing image aligned right to center on mobile’ is closed to new replies.