[Vanessa Gonzales]

Hi again 🙂

So the very last issue I’ve been having is the images I insert onto the page look great on pc or laptop, but then they overlap the frame of the template and run off the page in mobile view. This is also happening with the contact form sections on the contact page. They’re huge in mobile and run off the screen but look great in pc or laptop view. See NightOwlFreelance.com.

Any help is appreciated.

Thanks again!

[Grace Themes]

Hi,

To display responsive images in mobile devices

Add below css code in Appearance -> Editor -> style.css file

@media screen and (max-width:767px) {
.site-main img {
    width: 100% !important;
}
}

As you are using background image for your website and it is not possible to display responsive background image in your contact and other page

Regards
Grace Themes

[Vanessa Gonzales]

That worked to contain the images in the mobile view area. However, now, the smaller images are stretched to fill the whole mobile viewing area causing extreme distortion. Please advise.

Otherwise, yes, I’m using a page background image and it looks great in all views. 🙂

Thanks so much for your time!

-V

[Grace Themes]

Please use the title text instead of title image

[Vanessa Gonzales]

I’m not sure what you’re saying. The issue is that the images are now contained within the page frame on mobile phones, which is good, but the smaller images are stretching to 100% causing major distortion.

[Grace Themes]

Hi,
Please add below CSS in bottom of the style.css file and let me know your feedback.

@media screen and (min-width:781px) and (max-width: 1050px){
.ari-fancybox-pdf.ari-fancybox > img { width: 100% !important; }
}

Regards

[Vanessa Gonzales]

Didn’t work.
I’ve been troubleshooting a lot on my end as well–process of elimination. 🙂 I feel like we’re getting close.

So, check out this page on mobile view: http://nightowlfreelance.com/editing-services-and-pricing/

In vertical view, the “buy now” buttons are stretched beyond even being readable. In horizontal view, the images overlap the edge of the page.

And thanks so much for your time!

-V

[Grace Themes]

Hello,

Please add below CSS in bottom of the style.css file.

@media screen and (min-width:781px) and (max-width: 1050px){
.ari-fancybox-pdf.ari-fancybox > img { width: 100% !important; }
}

@media screen and (max-width:980px) {
.ari-fancybox-pdf.ari-fancybox > img { width: 100% !important; height:auto !important; }
}

and remove below old CSS We have told.

@media screen and (max-width:767px) {
.site-main img {
width: 100% !important;
}
}

and let me know your feedback.

if is it not work for you. please send login details for temporary at: [email protected]

we will fix your all issues

[Author]

Posts