Web development and CSS lives mostly on 4 components in order to give webpages a beautiful, user friendly layout: sizing, spacing, alignments and responsiveness.
Now that we know how rem empowers responsive sizing, let’s play with a few more ways to get your page into working order by manipulating these 4 components.
Min-maxing Your Sizes
Using rem units for your div allows your website to be as flexible as it can be on the height and width, but you should remember that your site will still have many div components so simply dropping rem width everywhere won’t work. On the other hand, the last thing you want for you content is to overflow from their sections in your layout or for the content to go far too wide once you maximized the window. An easy solution to this is to use what classifies as a “wrapper” custom selector that sets the maximum size the container will go. The wrapper would look like this:
What wrapping does is it keeps your content in comfortable sizes so that even when you have a large screen, it will still adjust to a size large enough to consume the content comfortably but wrap properly if the browser window is smaller. If you have column classes on the same container that you want to wrap tighter, it’s best to add custom selectors for each column class using smaller percentages, setting it as:
It’s the best practice to wrap the image with the same column width as the container as it’s sitting in, using the same method of using custom selectors like with what you did with your columns.
Using the Clearing Method to Remedy Float Issues
Float property is used in CSS to make elements move away from the standard flow of a CSS document, usually allowing users to have multiple columns or wrap text around an image. Elements have a tendency to have issues when they’re floated, mostly when a div needlessly surrounds a floated div class. Originally, users took care of float issues like this by doing something like this:
This old method adds unnecessary clutter in your HTML markup that does nothing but clear. The new, better method to do this is as follows:
By putting the clearfix at the parent of the div container that you need to work with while you’re using :after pseudo-element, it allows the parent element to automatically clear its child elements. There are many better ways to do what float tries to achieve by going the display: inline-block or using CSS Flexbox for all newer browsers, something that we will talk about in a later article.
Using @media Queries for Responsive Layout Adjustments
When using the @media query in CSS to ensure that the layout responds properly on smaller windows or screens, the smartest way to do it is to add padding to your max-width so you can prevent a window from just edging your container’s body, smushing the contents. This can be done with:
By using a desired padding width, it allows your content to have just that the edge of your container is not smushed by the browser window. This gives it a cleaner look and feel. When using float columns for your page and you would prefer it to adjust down to a single column once you reach a certain width, it’s best to remove the float and set your column width to 100%. It will look like this:
This will allow your content to adjust to a single column once your screen size is at 60rem. The size is obviously up to you, but always remember that in CSS, rem is typically multiplied by 16 (typical browser font size) to convert it to pixel size. Put that into perspective and you can get the correct page layout that is both responsive and does not overflow into an ugly mess.