All comments

• 

  Adam•210

  @AdamMintajSubmitted about 2 years ago

  One thing I wasn't sure about here was how to make the profile picture always center on the verge of the card's bubbly background image. Finally I set the picture's top margin to be relative to the card's width but I'm sure it's not the driest solution since I had to adjust it with media queries anyway. I'm wondering now if it wouldn't be better to just go with fixed values in pixels on everything in the first place. I'd appreciate if anyone put their two cents in on this dilemma Edit: thanks to Ahmed-Elsayed I realised I have overcomplicated things unnecessarily and have already fixed that

  

  Profile card component

  1

  30
  

  Ahmed•150

  @Ahmed-Elsayed-projectsPosted about 2 years ago

  Hello @AdamMintaj, -One way to do what you want and avoid media queries is to put the user information section and card's background inside a flex container. Then set each of them to flex:1; which will make them share the height in half. From here you can use two way to center the image:

  1. Center the image horizontally with text-align: center;. Then center the image vertically by setting negative margin with half of the image height/width(doesn't matter since it's square-shaped) which in that case is margin-top: -48px;.
  2. Use position: relative; on the information section. Then add this to the image position:absolute; left: 0 transform: translate(-50%, -50%) /*centers the image horizontally and vertically*/ Personally I do prefer the first method because I don't have to add margin padding-top to the information section(to prevent overlapping). Here's a link for my solution: https://www.frontendmentor.io/solutions/flexbox-and-background-styles-WL9A0tbLRn . Hope it helps

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Oishik Biswas•70

  @pippal5536Submitted about 2 years ago

  I tried to make the project without many lines of code but I am having a feeling that the project could be done with way lesser code. Please suggest me lesser code if there are any.

  

  Mobile First Approach with css flex box.

  3

  70
  

  Ahmed•150

  @Ahmed-Elsayed-projectsPosted about 2 years ago

  Hello Oishik Biswas I've a few suggestion for you:

  1. Instead of mentioning every selector like html, body, div and etc. you could use the wildcard * which represents every single selector e.g

  * {
           /*code goes in here*/
  }
  

  2. when styling photos try to declare either height or width and not both(unless you are making it on purpose) to keep the photo's ratio correct. I think that you can already notice the difference between your QR image and design image
  3. Try use HTML headers(h1,h2, ...) for headings instead of paragraphs so you don't have to completely style <p> to look like a header. An example in your code:

        <p id="qr-tip">
          Improve your front-end skills by building projects
        </p>
  

  Hope it helps

  Marked as helpful

  1