Here is a basic project I’m doing: https://www.frontendmentor.io/challenges/fylo-data-storage-component-1dZPRbV5n
I know how to do it with positioning, but I’m trying to figure out the process with Flexbox. When the screen size is mobile, I know you change the flex to “column” and the two main boxes will stack.
Here’s my question:
As for the content inside each of the boxes, would they be purely laid out in Flexbox? Or would the layout include positioning? Or would it be a combination of Flexbox and padding?
I would like to know the standard way to approach this problem.
I just wanted to know if I’m using the correct techniques. I’m using Flexbox to align items and padding to create the space. As opposed to for example, using positioning with Flexbox.
Yes that’s basically correct although you are overusing the divs a bit and your class names are a bit specific as left-section may not be the left section when it is vertical. Also naming the container flex-container is a bit silly because you may find that a grid container is better at some later stage and then you’d have to change all the html. Just call it a container or fylo-container and don’t describe its css characteristics in its class name. Use class names that refer to the content rather than their position on the page (although sidebar is usually acceptable as it usually infers its not the main content).
Also simplify the padding if you can and apply to the main elements rather than each individual element although this is not always possible.
Avoid fixed widths at all costs. You set left to 350px and right to 700px so you would have been better setting a max-width of 1150px + gap on the main container and allow the items to scale smaller. You can then use flex to make one side twice as big as the other without using measurements. This also means that when you add the media query for smaller screens you can just change the display on the flex container and forget about changing the widths.
Use flex to centre your icons rather than fiddling with padding on each item. This saves code and makes them centre perfectly without trying.
I’ve updated the code into a forked codepen but left the right side for you to work on
Hope that helps but you are working in the right direction so well done so far
It’s been a quiet day around here so I had a play with the right hand side.
There are loads of ways to approach this but its best of you can keep control of the flow rather than absolutely positioning things that need to take up space in the document.
Rather than using an image for the range slider I just used CSS which means you can adjust the size easily depending on the percentage of GB used etc. If you wanted to be really clever you could use an actual range slider (but disabled) however I think that’s too much work especially when you are not trying to gain a range input from the user.
What is it you don’t understand exactly and I’ll try to explain. It’s just a few elements cobbled together
It’s just practice and knowing what you can do with css. It’s basically a linear gradient with an element placed on top to rub it out and create the range effect.
Look at the last demo where it animates the slider as that is the best version and may be easier to understand. It can also be adjusted by changing just the width value on one element as shown by the keyframe animation.
