And I have tried a few different codes but none have worked: I already tried these:
@media screen and (max-width: 768px) {
.img-container {
text-align: center;
}
}
/* center images on mobile screens */
@media screen and (max-width: 719px) {
.entry img {
float: none;
display: block;
margin: 0 auto;
}
}
@media only screen and (max-width:480px){
.entry-content p {
margin: 0 auto;
width: 180px
}
}
@media screen and (max-width:620px) {
.alignright {
float: none;
width: 100%;
margin-left: 0;
}
}
Hi,
There are 3 steps,
Add Image
Set display property to right
check Output
For more elaboration please check this link. I attached images in this link
http://imgur.com/a/9PyrB
Thank You,
[signature removed by moderator per forum rules]
-
This reply was modified 3 years, 10 months ago by
Ali Shan.
-
This reply was modified 3 years, 10 months ago by
stephencottontail. Reason: removed signature
Hello @madhavadasa
You can achieve this by applying following CSS code.
@media (max-width:320px)
{
#content .alignleft, #content img.alignleft {
width: 100% !important;
}
}
@media (max-width:480px)
{
#content .alignleft, #content img.alignleft {
width: 100% !important;
}
}
Hope this will help.
Thank You.
I thank both TheRightSolutions and wbcomdesigns for your replies.
TheRightSolutions – I’m not sure how your suggestion addresses my issue of trying to center images on mobile while keeping them left aligned on desktop, but thanks for taking the time to reply.
wbcomdesigns – Thanks alot, this worked like magic ! Added the code, cleared the page cache and walaa, site looks great on mobile now. I checked all my pages on 2 sized phones and a tablet and all pages look great now. Thanks alot, it’s a great help.
also in the footer widget I have a 1075 wide image that’s center aligned, but on mobile it only shows the left quarter of the image. How to center it so at least it shows the center portion ?
http://www.geminithermohvac.com/residential-hvac-technician/
Hello @madhavadasa
You can achieve this by applying following CSS code.
img.size-full.wp-image-102.aligncenter {
width: 100%;
}
@media (max-width:320px)
{
img.aligncenter.size-full.wp-image-382 {
width: 100%;
}
}
Hope this will help.
Thank You.
-
This reply was modified 3 years, 10 months ago by
wbcomdesigns.
Thanks. This works for the bottom image (image-382) since it’s only 350 px, it now displays nicely on mobile without being cropped.
However the top image, the one I originally mentioned which is 1075px, the whole image now displays without getting cropped, but it looks smushed – the height is too high & not relative to the width. How to display with consistent height to width ?
