Profile Card using Flexbox

Community feedback

• 

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  Hi,

  Solution for Question 1 :

  • Make sure you fix the 2nd problem first.
  • Remove margin and width in the body tag if any
  • Add the following to the div with class name "main"

      max-width: 1000px; 
      width: 40%;  
      margin: 3rem auto; 
  

  Solution for Question 2:

  • The body seems to have overflow: hidden; attached to it. Remove it.
  • Remove the margin: 5% in body as this is causing an overflow. The total width is getting calculated to 110% on x and y axes.
  • Once these 2 properties are removed from the body, the overflow still persists. This is due to the background images (top and bottom svg images) you have added in your card component. Instead of the img tag in html, you can set those images using CSS as follows:

   body {
    background-image: url(../images/bg-pattern-top.svg),
      url(../images/bg-pattern-bottom.svg);
    background-repeat: no-repeat;
    background-position: right 50vw bottom 50vh, left 50vw top 50vh;
    background-color: var(--cyan);
   }
  

  This will mostly solve your overflow issue

  If you still don't understand, try to go through MY SOLUTION

  PS : Just a heads up, use landmark tags instead of div everywhere. A quick start would be to convert the div with class "main" to a main tag instead

  Happy Coding!!✨✨

  12

  Marked as helpful
• 

  Fidel Lim•2,775

  @fidellim

  Posted almost 4 years ago

  Hi Nayana, I believe the reason why scrollbars appear is that you are setting margins on your body tag :

  @media screen and (min-width: 1000px)
  body {
      /* margin: 20% 30%; */
  }
  

  With this, the whole page will really expand.

  10

  Marked as helpful
• 

  SHAHAB MALIK•345

  @Shahab-Malikk

  Posted almost 4 years ago

  Hi @Nayana great work implemented things well there is no issue in website

  Keep Coding

  00