Homepage Slider Image

[JOAQUIM PEREIRA]

Hello,

On the Homepage, The Main Slider Image appears cut off in the mobile version. How can I solve it?

Is there any way I can use a different size for the image on the desktop version from the mobile version?

Thanks in advance,

[themearile]

Hi JOAQUIM

Thanks for contacting us.

Please add the below css code in the Additional css box to the responsive slider in the mobile view. Please go to the Appearance => Customize => Additional CSS then paste the CSS here and click to Publish button.

#theme-main-slider .item {
background-repeat: no-repeat;
height: auto !important;
}
#theme-main-slider .item {
padding-top: 52.56%;
display: block;
height: 0;
}

Let us know if it works.

Thanks

[Sonya Edmonds]

I have used this code to solve the same issue, but now my menu button seems to be in the way on my mobile site. Can you take a look.

http://www.sonyamichelle.com

[themearile]

Hi Sonya

Please see the screenshot https://prnt.sc/8Qjx_fDmV4ws do you want to display it like this?

Thanks

[Sonya Edmonds]

Yes. this would be much better instead of the overlap.

[themearile]

Hi Sonya

Yes, please add the below css code in the Additional CSS box.

@media (max-width: 500px) {
.navbar.navbar-header-wrap {
position: relative;
}
.navbar.navbar-header-wrap .nav .menu-item .nav-link {
color: #061018;
}
.navbar.navbar-header-wrap .navbar-toggler {
border-color: rgba(1, 1, 47, 1);
}
.navbar.navbar-header-wrap .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=’0 0 30 30′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(1, 1, 47, 1)’ stroke-width=’3′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 7h22M4 15h22M4 23h22’/%3E%3C/svg%3E”);
}
}

Let us know if it works for you.

Thanks

[Author]

Posts