Skip to content

Ancre & Scroll

Useful & Responsive Layouts, no Media Queries required
Conquering responsive layouts: https://courses.kevinpowell.co/conquering-responsive-layouts Here’s 5 quick responsive layouts that you can use, without any media queries! There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation! 🔗 Links ✅ Netflix scroller: https://youtu.be/b--q6Fsf_cA ✅ Every Layout: https://every-layout.dev/ ✅ Conquering Responsive Layouts: https://courses.kevinpowell.co/conquering-responsive-layouts ⌚ Timestamps 00:00 - Introduction 00:13 - The Cluster 01:10 - Nothing wrong with media queries 01:47 - Auto-grid 03:00 - Flexible grid 03:33 - Reel 05:41 - Do you struggle with responsive layouts? 06:12 - Main with sidebar #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
www.youtube.com

Décalage d’une ancre lors du scroll

Objectif
Ajouter une margin-top lors sur scroll vers une ancre (#section-product) sans affecter le contenu autour de l’élément. Généralement utilisé pour ne pas que la navigation morde sur une section.
👉 Intégrez le code suivant dans la partie Head Code de votre projet Webflow ou dans un embed placé avant le contenu modifié.
<style>
/* Décalage d’une ancre lors du scroll */
.classe {
scroll-margin-top: 80px;
}
</style>
: 4.8/5 -





Mofifier la rapidité du scroll vers une ancre

Objectif
Ajouter une margin-top lors sur scroll vers une ancre (#section-product) sans affecter le contenu autour de l’élément. Généralement utilisé pour ne pas que la navigation morde sur une section.
👉 Ajoutez un data-atribut à votre élément / ancre
Webflow > Designer > Cliquer sur l'élément > Element Settings (D) > Custom Atributs > + >
Name : data-scroll-time
Value : 0.25

Butter slider


Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.