It will “crop” the sides of the image on mobile in portrait mode because the screen/browser size will be higher than it’s width, so this is normal behavior.
A couple of different things you could try;
1. use a different image for display on mobile. Add this to ‘Appearance’ > ‘Customize’ > ‘Additional CSS’:
(use actual name of your image instead of ‘name-of-image-for-mobile-view.jpg’)
@media screen and (max-width: 768px) {
.slide.slide-count1 {
background-image: url('http://thebeerandnow.com/wp-content/uploads/2019/06/name-of-image-for-mobile-view.jpg');
}
}2. set a maximum height for the image area so the height will be not so high in relation to the width. Disadvantage of this is that the image will no longer fill the screen/browser window top to bottom.
Again add to ‘Additional CSS’:
(experiment with different heights, the ‘400px’ value til you get the look you want)
@media screen and (max-width: 768px) {
#home-slider-section .bx-viewport,
.slide.slide-count1 {
max-height: 400px;
}
}