Background doesn’t fit on mobile

  • Resolved veronika2vvv

    (@veronika2vvv)


    4 years ago

    Hi
    i am using free thumbnail slider. i have horizontal and vertical background images in slides. For vertical images i have used fit mode – on desktop it looks ok, but on mobile images are cropped. Also on mobile thumbnails are all different height. Is it possible to fix it?
    desktop: https://snipboard.io/MZKYgx.jpg
    mobile: https://snipboard.io/TGRefX.jpg

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Ramona

    (@nextend_ramona)

    4 years ago

    Hi @veronika2vvv

    The problem on mobile happens because of the following 3rd party code that modifies the height of all images on your site, and messes up the images in the slider:

    @media only screen and (max-width: 767px){
#page-content-wrapper .inner .sidebar-content.fullwidth img {
    max-width: 100%;
    height: auto !important;
}
}

    The code is coming from: /wp-content/themes/avante/css/core/responsive.css

    The best would be getting the “!important” removed from this code completely because it makes it unnecessarily strong.

    As a temporary solution you could add the following CSS code to your theme’s custom CSS giving place or to the Customizer > Additional CSS:

    @media only screen and (max-width: 767px) {
	#page-content-wrapper .inner .sidebar-content.fullwidth  .n2-ss-slider [data-mode=fit] .n2-ss-slide-background-image img{
		height: 100% !important;
	}
}

    That should revert the effect of the theme’s CSS code above.

    Thread Starter veronika2vvv

    (@veronika2vvv)

    4 years ago

    thank you a lot!!!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Background doesn’t fit on mobile’ is closed to new replies.