Customize header slider image's size

Hi there !
i would like to know if it is posible to customize the header slider image’s size on mobile.
This is the site "www.clarityaudio.cl"
What i want is to be able to show more of the (kind of green) color in the grey images on the slider in mobile version, in deskopt the images looks perfect,
i tried to change this on a photo editor, example: if change the position of the hand with the microphone to see it in mobile it gets to much in the center in deskopt version.
i hope this is clear enought.
Thanks for your time

Hi,

What you can do is to position the image from right or left, using this Custom CSS for example ( positioned from right ):

@media only screen and (max-width: 1024px) {
.slides-container .slide-item, .panel-row-style {
    background-position: right center !important;
}
}

or from left with this one:

@media only screen and (max-width: 1024px) {
.slides-container .slide-item, .panel-row-style {
    background-position: left center !important;
}
}

or you can use instead of left and right % values like 50% or 10%, etc.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Hi !
This is perfect, the only thing i need to know that’s probably basic, is how do i add the desired percentage into the code? i’m sorry but im pretty new to this.
Would you care to give an example ?
Thank you so much !

if there is a way to affect the images independently it would useful too, if not, the how to add the percentage question above will do the trick as well.
Thanks !

Hi,

Percentage can be added like this:

@media only screen and (max-width: 1024px) {
.slides-container .slide-item, .panel-row-style {
    background-position: 30% center !important;
}
}

Please let me know how it works.

Best Regards,
Csaba