@ciandm
Posted
Hi Aaron,
To help you find the dimensions, you could create a free Figma account or Adobe XD and drag the images in to them that you download, on an artboard that is correctly sized for the images. For example, I believe the images in the challenges for desktop are usually 1440px, which is a standard artboard for designing desktop screens. You can create a 1440px artboard and drag the image that you download onto it and then use the built in rulers to determine sizes. Alternatively, measure distances using the rectangle tool by drawing the distance between components, or the padding on the components, etc.
To position your component properly, it's usually a mix of padding and margin as well as using flexbox (which you seem to be using here). I would tend to not use fixed heights where possible as these can harm responsiveness. On that note, you should look at media queries to style your solution for mobile. As well, you seem to be using general selectors for your CSS styles. I would encourage you to use class names for styling, and maybe even look at the BEM notation for naming your classes. While the general selectors might be okay for this challenge, you will need more control of your styles on larger pages and designs.
@aaron-diaz
Posted
@ciandm Thank you very much for your feedback! As you said, the fixed heights were preventing the site from being completely responsive, despite the fact that I was actually using media queries. I fixed the problem by playing with the margins of some elements instead. On another note, I just created a Figma account and began looking into css methodologies. I'm confident solving the following challenges will be even easier for me now that I've taken your advice :)
