I created a banner image for a webpage and by specifying a width of 100% and a max-width of 1024px I got an image that scales down on small devices but also doesn’t get to big on large displays. Perfect.

I decided that I’d like it to be a slideshow so I’ve been testing this pure CSS implementation https://codepen.io/gradar/pen/BaavLLo

The problem is that on smaller devices, the images are too big. So I tried applying the same CSS I did for my static image but it didn’t work. I assume that this is due to the CSS animation specifying funky margins. Is it possible to get the same behaviour that my banner does on the codepen example?

PS: My page with the working banner image is here in case it makes it clearer https://optimumhealth.ie/yoga-festival/

  • AwkwardLookMonkeyPuppet@lemmy.worldEnglish
    1·
    5 months ago

    Set height of the .slide to auto.

    Change width to calc(100vw - left gutter width)

    With “left gutter width” being whatever pixel width your left gutter is.

    Set overflow to hidden on the slide wrapper

    Give the slide wrapper the same gutter width on the right as the left.

      • AwkwardLookMonkeyPuppet@lemmy.worldEnglish
        1·
        5 months ago

        Yes, I’m talking about your left margin. You need to account for that since it takes a portion of the viewport width (vw unit). I just had a look at your css again and it looks like your left gutter is from the 5% padding you added to the body. In which case your attribute value pair would be

        .slide {width: calc(100vw - 5%);}

        I’m commenting from my phone, so it’s not easy to check your code, but based on what I saw that should fix it. Setting overflow hidden on the wrapper will give you the gutter on the right of the wrapper too since that is coming from the 5% body padding.

          • AwkwardLookMonkeyPuppet@lemmy.worldEnglish
            1·
            5 months ago

            I wasn’t suggesting that you add a gutter. I was explaining how to account for your current gutter that is a result of your 5% body padding. Just make the 2 changes to the .slide component that I recommend, and the change to overflow on the wrapper, and it should be good to go. Don’t make any other changes. If you still can’t figure it out then I can type it out on my computer tonight.

              • AwkwardLookMonkeyPuppet@lemmy.worldEnglish
                2·
                5 months ago

                Okay, I jumped onto a computer to view it. The issue is that you’re trying to mix fixed widths with percentages, and you’re trying to make responsive layouts with fixed widths, which isn’t possible. Well, it’s possible if you use max-width and account for height differences, but it can get wonky.

                What I was seeing on the phone was completely different than what you’re seeing on your desktop. I tried to fork your project so that I can show you the few adjustments that need to be made, but there’s no anonymous way to do that. I’d have to sign in, and my codepen account uses my real name. So, I’ll just paste the below.

                This works great, for all viewports until you get down into mobile sizes, because 50% isn’t wide enough at that point. What you should do is change everything that I set to 50% too 100% instead, and then use a min-width mobile media query at about 768px to change it to 75%, and then again to 50% at 1920px. That’ll give you nice smooth transitions between breakpoints that look good on all devices. Keep in mind that if you’re using images inside these slides, then they’re going to skew if you set a defined height like you’re doing. You need to change the height of the slide wrapper to auto, and the img tags to auto, otherwise you’re going to skewing. Of course that’ll make the slider shorter on smaller viewports. So, you can either use SRC set to display different images per viewport to accomodate the different aspect ratios, or you can use background images instead, and set them to background-size: cover and background-position: center center. That will allow the picture container to just kind of grow outward from the center of the image, showing more of it as the viewport size increases. SRCset is probably the better solution unless you’re showing images where it doesn’t matter if you cut part of the content out. Or, you can just let the slider get shorter as the viewport gets skinnier. That’s not really uncommon.

                Anyways, here’s the full code I copied. I only changed a few things, but I copied the whole thing for ease. You can just copy, select all in the codepen window, and paste, rather than trying to figure out where everything goes. After you do that then evaluate what has changed and you’ll understand what’s going on.

                body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  background: silver;

}

#slideshow {
  text-align: center;
  overflow: hidden;
  height: 510px;
  width: 50vw;
  margin: 0 auto;
}

.slide-wrapper {
  display: flex;
  overflow: hidden;
  width: fit-content;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: auto;
  width: 50vw;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -50vw;}
  50% {margin-left: -50vw;}
  60% {margin-left: -100vw;}
  70% {margin-left: -100vw;}
  80% {margin-left: -200vw;}
  90% {margin-left: -200vw;}
}
                • FarraigePlaisteach@lemmy.worldOPEnglish
                  2·
                  5 months ago

                  Thank you so much for this. You went to a lot of effort.

                  Thanks for the explanation too. It works really well at all kinds of resolutions and window sizes. I’ll experiment with the values you mentioned. 🙏