Hi, is there someone, who could help my with my comming soon page with fullscreen carousel and centered div (with logo and other carousel). It looks great on PC, but on mobile, carousel images are only on top of the screen, not overflow as I need. I’m using bootstrap studio for generating this page.
Maybe done with change img to div with w-100 h-100 and background.
You seem to have fixed it before I could give you an answer.
BTW - You’ve misspelled comming (should be coming - only one “m”)
Thank you 
Second small prob I have, that backgrounds are loaded from network when they are displayed. Is it possible to preload them ?
You don’t have to add a div and use background images. You can import your own images into Bootstrap Studio and insert them as slides, and them make the following adjustments to your Carousel…
(NOTE: Make sure you are on the XS display size)
- In the Overview Panel, select the Slide
- Go to the Options panel, go to Flexbox settings and change Flex Container to Flex, and Justify Content to Center
- In the Overview panel, select the Image
- Go to the Options panel, go to Flexbox settings and change Flex Container to Flex, and Grow to Yes
- With the Image still selected, go to the Attributes panel and add the class w-auto in the Class Names field
You will need to repeat these steps for each slide unless you multi-select the components by holding the ctrl key down when you click on them. This way, you can change the Flexbox settings for all your slides at once. The same goes for changing the Flexbox settings on the images, and adding the w-auto class.
Thank you, that’s great On XL and XXL there is little aspect ratio error - image is resized by width, not height 
Maybe my fault - I have w-100 h-100 on slide items. When I remove it, on big monitor, background is not on whole screen, when I have it, aspect ratio is bad on xl, xxl.
I believe that the images may have a very high resolution, it took a while to load the site and they, just an observation.
I’m not seeing any issues with the aspect ratio, but the images you’re using measure 2000px by 1333px. My monitors are only 1920 x 1080, so I can’t see exactly what you’re seeing.
The method I posted was kind of a quick fix. I really would need to spend more time on this to find the best way to do it. Using the method I posted above, if the slide image is larger than your monitor (or browser window), you’ll end up with a vertical scroll bar. You can add the overflow-hidden utility class to the body to hide the scroll bar, but the slide image will never be smaller than its native resolution. I could probably come up with a better solution if I had the time.
One thing I can tell you… you should definitely optimize your images. The images in the small Carousel in the middle are massive and you’re reducing them down with CSS. Not good for page load speed.
Also, in the full screen carousel, you’re using opacity to lighten the images. These images are very large in dimension and color gamut, which results in very large file sizes. If you open them in photoshop and lighten them there, and then export them as jpgs at medium quality, you’ll reduce the file sizes by well over half. When you lighten an image you reduce the contrast which reduces the number of colors, thereby making the file smaller.
I’d also make the logo an SVG file (since it’s just a font) and use the CSS drop shadow filter to add the shadow. You’ll save about 70% on the file size.
Many thanks for yours description.
I count with optimizing images and etc, but in this moment it is faster to try it this way. After I will have good look, I will change the images. Logo is not final too in this moment. I’m trying to learn with BSS and after lot of year trying to understand new html
If I have some free time today, I’ll look into this a little more for you.
Little optimization done