Click here to improve your skills! !! [click]

How to display a right-aligned image on a smartphone / browser with a small screen resolution to the full width | WordPress

WordPress
This article can be read in about 2 minutes.

class=”alignright”

WordPress automatically aligns the image to the right

class=”alignright”

Is attached to the image tag.

For example, if you have a small right-aligned image (width 300 pix), the text will be placed on the left side and it will be hard to see when you look at it on your smartphone.

Screen seen on a personal computer

Screen seen on a smartphone

I want to display the full width on my smartphone.

In the case of a smartphone, it is a method to eliminate the wraparound of the text so that it is displayed in the full width.

.alignright{
float:none;
width: 100%;
height: auto;
}

@media screen

@media screen and (min-width: 480px){
.alignright{
float:right;
width:inherit;
height:inherit;
}
}

Above @ applies to smartphones, below applies to PCs and tablets!

If you set it, it will be easier to see on your smartphone.

Display when viewed on a smartphone

20160917122800

With this, in the case of a smartphone, the image will be adjusted to the width of the screen, so the line breaks will be refreshed!(^^)

Copied title and URL