madhavadasa

It happens on this page:

https://www.geminithermohvac.com/portable-air-conditioner-facts

.

This worked, Thanks !

Yes, I did give my website https://www.geminithermohvac.com
It’s the image in the footer, it shows on all pages.
Thanks

https://www.geminithermohvac.com

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 ?

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/

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.

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;
}
}

well I decided to use a fixed widget plugin for now, so for now it’s ok with the space.

In the screenshot I had tried putting the contact form below the map, but it still has a large space above it whether I put it below the map or the image.

And here’s the code I have in the right column text widget. It’s for the image, contact form, and map:

<p style=”text-align: center;”>[contact-form-7 id=”200″ title=”test”]</p>
<p style=”text-align: center;”>[wpgmza id=”1″]</p>
<p style=”text-align: center;”> </p>

I’m noticing now that this is only happening in Chrome (not IE or firefox)