[ona-praderasParticipant]

Hi,
I’m using Layer Slider for a background image above Masthead.

The problem is that the image is not resizing properly. When I change the screen size the image is cropped instead of resized to fit the screen.

What’s the best way to make the image resize to the screen?

Here is the link to the site I’m working on: http://www.thehipheroes.com/

Thank you for your help!

[ChristianModerator]

Hey there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ona-praderasParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 1920px) {
    .ls-inner, .ls-container, .ls-slide  {
        width: 100% !important;
        height: 355px !important;
        background-position: 0 0 !important;
        background-size: cover !important;
    }
}

Hope this helps.

[ona-praderasParticipant]

Thanks so much!
I added changed
height: 600px !important;

and it looks great on a large screen. However, the image does not resize properly on smaller screens. Instead a part of it get cut off.

Is there a way to make the image resize to the screen instead of getting cropped?

Thank you so much!

[ZeshanMember]

Hi there,

You’re welcome!

It’s not possible to adjust the image size on smaller screens because the image size is custom and defined in the previously provided CSS. What you can try here is to reduce the height of slider again on smaller screens. As this is a customization that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here

So add following CSS code to reduce the height of image on smaller screens:

@media (max-width: 946px) {
  .ls-inner, .ls-container, .ls-slide {
    height: 400px !important;
  }
}

Adjust the height 400px to increase/decrease the size of image.

Thank you!

[jokschParticipant]

Hi There,
look into the Slider Settings -> Layout -> “Responsive under” and set a higher value (i.e. 1300)

Regards

[ThaiModerator]

Thanks for sharing @joksch

[Author]

Posts