How to Align Image to the right in blog posts

Support
#1

Hi there,

I’ve been asking a lot of questions recently I’m sorry about that. Your help is always much appreciated.

Here is my problem:

I see a lot of blogs with an image aligned to the right of the text in their blog post. Every time I try, it appears perfectly on the desktop but not on mobile. Any ideas/solutions?

Again, thanks for your help.

#2

Hi,

I checked you blog page and it doesn’t look like as you describe.

Can you try implementing it again so we can check and advise to make it look good.

Thanks

#3

Here is the link to one of my post in which I did what I described. It looks great on desktop but not on mobile. It’s the second picture, with bottle of vitamin C and B.

#4

Hello Stephanie,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  float: right;
    margin-left: 1em;
    width: 180px;
}

Here are some related links for further reading:

Hope this helps.

#5

Hi there,

Unfortunately it didnt work :frowning: Any other ideas?

#6

Hi Stephanie,

I see that your images are already aligned to the right on mobile screens.

If you’re targeting smaller screens, could you please update your code as follows and see if that helps.

@media (max-width:480px) {
  .wp-block-image .alignright {
    float: right;
    margin-left: 1em;
    width: 50%;
  }
}

Thanks!

#7

It looks better on your mobile but there are still some words that are not complete like “carbohydrate”. But it is worst on mine and both codes don’t change anything. Here is how I see it
.

#8

Hi Stephanie,

Honestly, it is not a good idea to have the images aligned in smaller screens. The reason is exactly what you have experienced and gave the screenshot. It is common sense to have the images that are aligned to left or right, sit at the center of the screen as a separate row. To achieve that layout, please kindly change the previously suggested CSS code to the one below:

@media (max-width:480px) {
  .wp-block-image .alignright,
  .wp-block-image .alignleft {
    float: none !important;
    margin: auto !important;
    width: 100%;
  }
}

Hope that helps.

#9

The code didn’t work unfortunately. The solution would be to make images appear to the right on desktop and on tablets but not on mobile whereas the images would be below the text or sit in the center of the screen as you said.

Is there a way to achieve this?

#10

Hi There,

This is how the image looks right now:

If you want to make it center on mobile, please update the previous CSS to this:

@media (max-width:480px) {
  .wp-block-image {
      text-align: center;
  }
  .wp-block-image .alignright,
  .wp-block-image .alignleft {
    float: none !important;
    margin: auto !important;
    width: 100%;
  }
}

Hope it helps :slight_smile:

#11

Hi! It seems to have worked except for my mobile. I don’t understand why. I still see it the same as my screenshot I sent you, but I asked a couple of friends and they see it as you do. Any ideas why?

#12

Hello Stephanie,

Thanks for updating the thread.

It might be cache related issue. Please clear cache and then try loading the website again.

Thanks.

#13

I tried clearing the cache. Didn’t work. So I asked a 2 friends of mine who have an android (just like me) to look up this picture and to screenshot how they see it.

Their phone display the picture just like mind, but 2 of my others friends who have Iphone sees it like the screenshot your colleague Thai showed me.

Im completely lost.

#14

Hi Stephanie,

Please update the given code to this.

@media (max-width: 540px) and (-webkit-min-device-pixel-ratio: 2) {
  .wp-block-image {
      text-align: center;
  }
  .wp-block-image .alignright,
  .wp-block-image .alignleft {
    float: none !important;
    margin: auto !important;
    width: 100%;
  }
}

if this still did not work, please let us know on what mobile devices these issue is happening.

Thanks,

#15

It works fine on Iphone. The problem are for android users.

#16

Hi @StephanieBelec,

Please remove the and (-webkit-min-device-pixel-ratio: 2), that could be the reason since pixel ratio could change on each device.

Then clearing all your mobile browsers cache and check again.

Let us know how it goes!

#17

Hi,

It seems to have worked for new images I’ve just put to the right in another post, but not this one. Let’s still call it a victory haha. Thanks you all for you help :slight_smile:

#18

You’re welcome!
We’re glad we were able to help you out.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.