How to Center Images on Mobile ?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter madhavadasa

    (@madhavadasa)

    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

    https://imgur.com/a/9PyrB

    Thank You,
    [signature removed by moderator per forum rules]

    • This reply was modified 7 years, 5 months ago by Ali Shan.
    • This reply was modified 7 years, 5 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.

    Thread Starter madhavadasa

    (@madhavadasa)

    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.

    Thread Starter madhavadasa

    (@madhavadasa)

    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 ?

    https://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 7 years, 5 months ago by wbcomdesigns.
    Thread Starter madhavadasa

    (@madhavadasa)

    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 ?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to Center Images on Mobile ?’ is closed to new replies.