More responsive Fluid Engine Blocks - Squarespace Tutorial скачать в хорошем качестве

More responsive Fluid Engine Blocks - Squarespace Tutorial

This is a method I've come up with that allows for easier, more flexible and more responsive blocks at different screen widths on Squarespace's Fluid Engine. The Fluid Engine grid is incredibly flexible and intuitive for most things, but sometimes attempting to center or position blocks so that they're consistent across different screen sizes can be a pain. A common issue is that you want to keep your line lengths a certain length or size your text blocks, but on Tablet/Small Laptop screens, you're finding that the spacing goes wonky - huge, awkward gaps created by empty columns on the fluid engine grid. The approach I've created uses a few simple and intuitive variables/mixins that can be easily customised/tailored to your needs. The CSS targets Squarespace blocks, specifically the ".sqs-block-content" element to manage the sizing. This tutorial requires a little bit of prior CSS knowledge as I'm not explaining basics in detail, but should still be easy enough to follow for any Squarespace Designer. Sample CSS below. If you're interested in my full boilerplate, please reach out in comments. ============================================= Interested in more Squarespace tutorials, tips and tricks? Why not visit the SquareSkills website for more content like this: https://www.SquareSkills.dev   / squareskills     / squareskills   If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website: https://www.kwameand.co/   / heykwame     / kwameand.co   ============================================= Sample variables and mixins. /* Squareskills Content Width Variables */ @content-large: ~"1080px"; @content-med: ~"720px"; @content-small: ~"480px"; /* Squareskills Content Width Mixins */ .block_large { .sqs-block-content { max-width: @content-large; margin: auto; } } /*Block Content Size*/ .block_med { .sqs-block-content { max-width: @content-med; margin: auto; } } /*Block Content Size*/ .block_small { .sqs-block-content { max-width: @content-small; margin: auto; } } ============================================= #squarespacetutorial #squarespacetips #squarespacewebsite #squarespacecss #squarespace #squarespaceplugin #squarespacecode #squarespacesnippet #squarespacehelp #squareskills #squarespace71 #fluidengine