Summer Sale | Flat 10% OFF on All Themes Package. Use Coupon Code Summer24 | Limited Time Offer! Buy Now

WordPress Website Templates

Find Professional WordPress themes Easy and Simple to Setup

inner banner

Images overlap the template design frame and run off of page

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
    Member

    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

    #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
    Member

    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
    Member

    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
    Member

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.