Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Mohamad,

  You shouldn't actually need media queries at all for this challenge.

  I recommend you

  1. Forget about the media queries and background circle positions for now. In fact, take the circles out for now. Instead, Focus entirely on the card

  2. Sort out html first. Semantic, meaningful tags, just like with any other document. What makes sense as a heading, what's a paragraph, what's a list etc

  3. Fix alt text. Background / decorative images can be blank, other images just need a brief description of what that image is of

  4. Style it with correct font, colors, letter spacing, margins, padding etc. Flexbox might come in handy for the stats at the bottom. Tip: max width on the card, no widths or heights necessary

  5. Center your card in a container that's min-height 100vh. Flex or grid are an easy way to vertically and horizontally center an item like this.

  6. Now is time to sort those background circles. Hint: they're background images... If you get stuck here I can help more when you get there.

  Good luck!

  2
• 

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  Ok so this might be a pretty harsh critique on your styling but I think it would help you out massively to research how to position elements with CSS. I'm not really sure what all of the translate functions are for. Basically the idea for creating this card is creating a div that's around 2.5x the height of the image when its width = 100%. That will leave you with a div with a height of 350px and a width of 100%. You seem to be using all sorts of different units in your styles. You should set the font-size = 16px inside of the html{} selector. This will set 1rem = 16px and you can now carry on with responsive design by measuring with relative units, like rem. So your measurements don't have to be exact so by looking at the card, you can see that if you split it into 1/5ths, the top 2/5 will be the image, the next 2/5 will be the white section of the card. You could make this 4/5 piece into a div, with 2 child divs; one for the top and one for the bottom. You can then center the avatar svg by applying centering with flexbox to the 4/5 div. You can then add the text under the avatar by creating another div and applying a marginTop of 1-2rem.Then finally that last 1/5 of the card is your footer. You can add display: grid to the footer, which should have a width of 100%. It should have 3 template columns of 1fr and 1 template row of 100%. You can apply the rule alignItems = center to center the text that you need to add vertically in the grid. Then you should add a borderTop to your footer with a light gray color with an alpha value of around 20% and 2px high. That's basically the approach sorry if that didn't help much feel free to ask me more specific questions that you have and I'd be happy to help.

  1

  ---

  

  Mohamad Ghadieh•50

  @mghadiehPosted almost 4 years ago

  @steventoben Thanks for the feedback. When I started looking into responsive design, I figure I should've set everything in relative units. Two questions

  • how would I set the width to be 1/5 of the height?
  • Regrading the media queries, should I always start with mobile first? Because I built the page to the measurements of the desktop.

  Thanks again for the feedback. A lot to learn from this :)

  0

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @mghadieh hey sorry I don't get notifications from this site for some reason. But yes I would try to steer clear from absolute units (px, pt, pc, in, cm, mm) for pretty much everything. Rem and em units are your best friend and can help you make a completely fluid layout. When setting your font-size for an element, ALWAYS use rem. It's very very common practice to initialize your stylesheets by setting the font-size in the html selector to 16px. Once your rem unit is equal to 16px, then that's when you can start using rem units for almost everything. If I wanted my font-size for h6 to be 32px I would write h6{ font-size: 2rem; //since 1rem = 16px, it makes for convenient measurements of 4px increments. } I often set my border-radius on cards = 0.25rem, which = 4px. I also usually set padding for a card component = 1rem, so it gives a good 16px to breathe on every inside edge of the card. Also if I want some text to be pushed down a bit I'll set the marginBottom or Top to 0.5rem or 1rem. So at this point you're probably wondering "wtf is so great about rem?". Basically it allows you to create components that scale perfectly with the root font-size. So if somebody zooms in or out on your website, the proportions of your component don't change. That's cool and all but em is arguably even cooler. em units are similar to rem, except that they are relative to their parent component's font-size, not the root font-size. em essentially acts as a multiplier of its parent's font-size. Let's say a div contained text with a font-size of 1.25rem = 20px. That means if I set the font-size of the div's child text to 2em, it would = 40px. You can almost think of it as replacing the 'em' with the parent's font-size and multiplying it by the number in front of the em unit. This comes in handy for a few important measurements too. Media queries should actually be comparing width in em units, not pixels. I also tend to set my letter-spacing for a font in my theme using em units. There are of course some other great units like percentage, vw/vh,etc. So back to your question, essentially what I was trying to say was that it looked like if you made that card the height of the card could be split up into about 5 equal horizontal cuts. The bottom footer of the card would be around 20% of the total card's height. So the main part of the card is that remaining 80% of the card, which looks to be about split into halves based on the background image's height at the top of the card. So basically i figured you could make a div that represents the entire card. That div contains two child divs, the first one being the main card area that's around 80% height, and the second being the 20% height footer. In the main card 80% height section, when placing the picture at the top and setting the width to 100% i believe that the 40% height it took up came out to around 150px. For the main card content area (80% height one) you can set display to flex and justify content and alignItems to center. Then you could place in the Avatar image, i'm not too sure how big but maybe 64x64px or 96x96px or something like that. Then you can create a div that holds your dark bold text, and thinner grey subtext. Applying a marginTop = 1rem or so to the text div would give it some breathing room. Then the final part is the footer. For that you simply want to set width = 100% and height = 100% then display grid and set up 3 template columns with one template row. You could then create three more text divs to display the text in each cell. Applying some styling like alignItems=center to the footer would align the footer content vertically. That's how I would approach styling a component like that, I dont think flexbox is a necessity and honestly you could make it work without grid i bet as well, bet it sure does help. And finally, in regards to media queries and designing for different screen sizes, it's very common practice nowadays to style your components for mobile devices, then once they are ready for mobile you can add in your increasing media queries and adjust things like font-size, dimensions, layout, really whatever you need. Almost everyone at least designs for phone and a desktop, but it's also common to have 5 media queries; one for phones, one for portrait tablets, landscape tablets, laptops, and high resolution desktops. Sorry for typing so much, I hope you were able to get a little something out of that wall of text.

  1

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hey @steventoben, youre giving great feedback but could you pop some line breaks in sometimes? I. Find it really hard to read big long blocks of text 🙏

  Thanks ☺

  2

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @grace-snow Ahah I'm so sorry, I just realized that you can use markdown in the comments here lol. I tend to ramble on a lot sometimes, but thanks for the advice I'll try format my comments better so they're easier to read!

  0