Slider crops image

dimi2023

In Restaurant, is it possible to increase the height of the slider so it doesn't crop the image? I still want the image to be full screen and I don't care how much space on the page it takes. Thank you.

saguaros

dimi2023 Hi

Could you share your site's URL + login info so I can check?

dimi2023

saguaros

Thank you for the reply and being willing to help. How do I PM the info to you?

saguaros

dimi2023 You can edit Fields in your first post or put into your reply and set it as Private reply.

saguaros

I recommend you to edit the images for a better resolution so that it can display fine in the slide. As in this JA ACM module, the images are set as background of each slide, you can use this custom css to force it shows full image:

@media screen and (min-width: 992px){
.acm-hero {
    background-size: contain !important;
}}

but the width of image is not enough to show fully in this section. By default, it will be resized to fill the screen.

dimi2023

saguaros Thank you so much. I'll try this right away. What would you recommend the image size to be?

saguaros

I'm using 1400x800 px, you can try 🙂

dimi2023

saguaros
Thank you so much, my friend. You pointed me in the right direction and gave me some awesome tips. Here's what I did with the code you gave me to solve my issue. I also added some other customizations. Thank you so much, again!

.acm-hero {
background-size: contain !important;
}

.carousel-indicators .active {
width: 20px;
height: 20px;
margin: 0px 25px;
background-color: white;
}
.carousel-indicators li {
width: 20px;
height: 20px;
margin: 0px 25px;
border: 2px solid crimson;
}
.carousel-control {
font-size: 25px;
color: red !important;
background-color: rgba(0,0,0,0);
opacity: 1;
}
.acm-hero.position-center .hero-content {
margin: 200px;
}