Contents tagged “responsive”

There are 59 contents with this tag:

  6. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  10. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }

  12. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  13. Avatar for csswizardry
    Harry Roberts @csswizardry

    I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    55 06:06 PM · Sep 29, 2022

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.

  18. Avatar for layoutplusplus
    Every Layout @layoutplusplus

    📢 The 3rd Edition of EVERY LAYOUT is now available!

    We were blown away reading all the kind words you gave us for testimonials; have some logical properties as a thank you!
    every-layout.devN

    236 03:36 PM · Jan 14, 2022

    Don't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts!

    The layout of my #Eleventy project https://pack11ty.dev/ uses it to get a responsive layout without any media query.

  28. I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. 😅

    Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?

  40. images-responsiver is a simple solution for most responsive images needs

    Is it catchy enough? 😁

    Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/

    If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver

    Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.

  52. Responsive Icons with SVG

    There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉

See all tags.