Congrats on completing the challenge! 🍾
Responsive styling can certainly be hard, but you did a great job! 👏
Hopefully I have some insights that might make it easier in the future. You totally don't need to use bootstrap for this task, and, in fact, I think it's easier without it.
When I'm working on styling a component, I usually employ one of two approaches:
- Top-down approach
- Bottom-up approach
Top-down Approach
- First, determine the dimensions of the top-level container of your component. In this case, that's going to be the
section with a class name of container. I'm not using Figma or Sketch, so I'll just open up the design jpeg in the Preview app on my Mac and use the "rectangular selection" tool to find these dimensions. I'll usually round it down to the nearest 10 as well.
- Once you have your outermost container's dimensions set, you can determine the width of its first child, which, in this case, is your image. You can figure out the width of the image by measuring the space between the image and the edge of the outer
container div. Once again, use the rectangle selector to measure this.
- Once I know that distance, I'll actually add it as padding inside the
container div. That way you can just make the inner elements/containers 100% and they'll maintain that distance. NOTE: If you adjust only the width of an image, it will maintain its aspect ratio, so there is no need to also adjust the height.
- From there, you just keep working inwards
Bottom-up approach
- Start by determining the width of your innner-most element. If there are more than one, choose the one that is wider or taller, depending on the orientation of your component. In this case it's going to be the QR-code image, and we want to know its width. Once you've determined its width, simply set it in CSS.
- Do the same thing as with the top down approach, where you measure the distance between your image element and the edge of its wrapper element, and make that the padding of the wrapper element. Notice with this approach you are still adding padding to the wrapper rather than margin to the image. This is because you want the same padding to apply to your other elements as well.
The difference between these two approaches is essentially which elements you are going to hard-code your dimensions to, and which elements you are going to make relative to those dimensions. So, in the top-down approach, you hard-code the size of the outer container, and make the child elements relative to that. With the bottom-up approach, you hard-code the size of the inner elements, and then make the size of the container relative to that. However, in both cases, you are using padding to determine those relative sizes.
Applying top-down to your component
- I observed that when I took all the styles off of your component in Chrome's dev tools, your component was already 90% of the way there. All I added back in was:
.container {
background-color: white;
}
- I then changed the height and width to
width: 20rem and height: 31.25rem.
.container {
background-color: white;
+ width: 20rem;
+ height: 31.25rem;
}
.container {
background-color: white;
width: 20rem;
height: 31.25rem;
+ padding: 1rem;
}
- At this point, your image seems to be in place, and so does the description, but I'll refactor the description to be consistent with our approach. I'll do this by replacing the margin with padding:
.description {
/* your other styles */
- margin: 0 10% 10% 10%;
+ padding: 0 1rem;
}
From there, you can just add your border radius and whatnot. I hope this helps and doesn't feel like I'm telling you exactly how to do it! There are many ways to complete these tasks, but these are just tips I've picked up along the way myself and have found them to be consistently helpful. Best of luck! 🍀
