Om Kakatkar

Latest comments

• 

  lai•10

  @laipatel

  Submitted almost 4 years ago

  

  Profile Card Component using HTML+CSS.

  2

  10
  

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  Hi,

  • For the background circles, you are going the correct way by applying them as a background image.
  • Instead of going with percentages for the background-position like the below snippet you wrote :

  body {
  	background-color: hsl(185, 75%, 39%);
  	background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  	background-position: -350px -500px, 700px 350px ;
  	background-position: top -150% left -10%, bottom -150% right -5%; 
  	background-repeat: no-repeat;
  }
  

  You can try the following :

   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;
    bbackground-color: hsl(185, 75%, 39%)
   }
  

  This will most likely solve your problem. You can also try going over My Solution if you don't understand anything.

  Happy Coding!!✨✨

  1
• 

  Alexis Rex•10

  @alexisrex08

  Submitted almost 4 years ago

  

  profile-card-component-main-VSCODE

  1

  00
  

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  Hi, The preview site link seems to be missing.

  0
• 

  Ornella Meneghini•10

  @MeneghiniOrnella

  Submitted almost 4 years ago

  

  Card-presentation

  1

  10
  

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  Hi, The Live Site Link seems to be broken

  0
• 

  Nayana Bhat M•90

  @nayanabhatm

  Submitted almost 4 years ago

  

  Profile Card using Flexbox

  3

  10
  

  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!!✨✨

  1

  Marked as helpful
• 

  Fernando Martinez•40

  @FerMarSol

  Submitted almost 4 years ago

  

  Desktop First with Flexbox

  2

  11
  

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  Looks great! You can try adding some more padding (padding-bottom) below the cancel order button.

  0
• 

  Jonathan Aldas•110

  @jonaaldas

  Submitted almost 4 years ago

  

  Order summary component

  2

  20
  

  Om Kakatkar•90

  @OmKakatkar

  Posted almost 4 years ago

  For the background, there are 2 components at use i.e. an image and a color We also need to make sure that the image does not repeat itself. You can try the solution in the other reply and it should work

  0