Okay
  Public Ticket #2802654
Align images to device size on mobile
Closed

Comments

  • Webcentricbh started the conversation
    June 15, 2021 at 11:01am

    Hello, 


    I am trying to align the images to the device screen on mobile  (e.g. I do not want margins on the left and right side of the image, I want the image to reach both left and right edges of the screen). 

    Current:  https://imgur.com/93DgmYO


    Desired: https://imgur.com/bhjTfsN

    Please let me know if this is possible, and the way to do it. 


    Thank you in advance!

    Hanson

  •  1,878
    Judith replied
    June 15, 2021 at 11:19am

    Hi There,

    Please try this css:

    @media only screen and (max-device-width: 2600px){
    body.using-mobile-browser .clients.fade-in-animation>div, body.using-mobile-browser .img-with-animation, body.using-mobile-browser .img-with-aniamtion-wrap .hover-wrap, body.using-mobile-browser .col.has-animation, body.using-mobile-browser .wpb_column.has-animation, body.using-mobile-browser .nectar_image_with_hotspots[data-animation=true] .nectar_hotspot_wrap, body.using-mobile-browser .img-with-animation[data-animation=flip-in], body.using-mobile-browser .col.has-animation[data-animation=flip-in], body.using-mobile-browser .wpb_column.has-animation[data-animation=flip-in], body.using-mobile-browser .img-with-animation[data-animation=flip-in-vertical], body.using-mobile-browser .col.has-animation[data-animation=flip-in-vertical], body.using-mobile-browser .wpb_column.has-animation[data-animation=flip-in-vertical], body.using-mobile-browser .nectar-fancy-box.has-animation, body.using-mobile-browser .nectar-split-heading[data-animation-type=twist-in], body.using-mobile-browser .nectar-split-heading span>.inner, body.using-mobile-browser .img-with-aniamtion-wrap[data-animation*=reveal-from-] .inner, body.using-mobile-browser .nectar-post-grid:not([data-animation=none]) .nectar-post-grid-item, body.using-mobile-browser .nectar-post-grid:not([data-animation=none]) .nectar-post-grid-item .post-heading span, body.using-mobile-browser .nectar-post-grid:not([data-animation=none]) .nectar-post-grid-item .meta-date, body.using-mobile-browser .nectar-woo-flickity[data-animation*=fade-in] ul.products .flickity-cell {
        width: 414px;
        left: -24px;
    }
}

    Thanks.