Celebrate Christmas and New Year with 10% off on Themes Bundle, use coupon code "XMAS10" Buy Now

Images overlap the template design frame and run off of page

Home Support Creator World WordPress Theme Images overlap the template design frame and run off of page

This topic contains 7 replies, has 2 voices, and was last updated by  Grace Themes 1 week, 1 day ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #12052

    Vanessa Gonzales
    Participant

    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!

    #12063

    Grace Themes
    Keymaster

    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

    • This reply was modified 1 week, 4 days ago by  Grace Themes.
    #12069

    Vanessa Gonzales
    Participant

    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

    #12070

    Grace Themes
    Keymaster

    Please use the title text instead of title image

    #12072

    Vanessa Gonzales
    Participant

    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.

    #12081

    Grace Themes
    Keymaster

    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

    #12082

    Vanessa Gonzales
    Participant

    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

    #12097

    Grace Themes
    Keymaster

    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: support@gracethemes.com

    we will fix your all issues

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.