This is a very cool trick that I learnt recently building a WordPress template.
It’s called a “source set” and it allows you to define a set of images, rather than just one. You can define which screen widths trigger each image to be displayed. Media queries. The example below breaks at width = 600px, 1200px and 2000px.
This was required for a project I am working on, and the solution I found turned out to be pretty simple. It just required creating a variable for each of the form input fields, “lowEnd” and “highEnd” and then creating a loop that ads one to the low end number until it get’s as high as the high end.
This is a very simple flex layout based on some examples from a recent smashingmagazine article.
This example was used to show how “flex” fails to created a true grid, because the lower blocks will not always line up with the blocks above. Having said that, there are settings that will allow the over flow to align with the boxes above, but will leave empty space if the number of items in each row are not equal.
The first example will keep each item aligned with the item above, but may leave the last row with an empty space. The important line of code is in the class controlling the item (inside the row) – in this case, line 16:
On the other hand, you can let the uneven items on the last row stretch to fill the space, which is quite handy in some situations.
Again, line 16 is the key:
Notice that I have changed the first 0 to a 1. This first value toggles between “initial” and “auto”. For more details on that check out W3Schools
The problem: You have two or three (or more) boxes in a row, each containing text above a button. Because each block of text is a slightly different length, depending on the screen width, the buttons are not always aligned.
The simple solution is to use Flexbox, but the problem is that the exact solution is not always so easy to find.
This is a bare bones solution. It requires three css classes.
The element (or box)
The button, which sits inside the box.
The container needs to contain: display: flex;.
This will make all the DIVs inside the sontainer stretch to the size of the container.
The Box needs to contain: display: flex;
flex-flow: column nowrap;
This will stop the elements from within the box forming their own columns. For example, without this, the H2 and P tagsn will sit side by side.
And to get the button to sit at the bottom you use this: margin-top. : auto;
The rest is just making it look pretty. Check out this simple example below.
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.