Images overlap the template design frame and run off of page
- This topic has 7 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
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!
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 ThemesThat 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
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.
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
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
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
- You must be logged in to reply to this topic.
