Skip to content
OverviewSolutions
9
Comments
3
Adrian
@Adrianmbugua

All comments

  • Adrian•160
    @AdrianmbuguaPosted about 2 years ago

    Hi nice work you can use media query eg @media only screen and (max-width:900px) then display:block , this will make them stack on top of each other . Use cursor: pointer; for the button and remember to add the hover states for the button button:hover {}

    Marked as helpful
    0
  • Adrian•160
    @AdrianmbuguaPosted about 2 years ago

    Hi All,

    Im getting this errors when I view report , no idea what could be causing it, I put my site through a css validator it found no errors , Im stumped ! I havent used any of the values shown in the error

    {ERROR CSS: transform: too few values for the property transform.

    Context: e-height,-.5em))}50%{-webkit-t ERROR CSS: transform: too few values for the property transform.

    Context: ebound,-.125em))}64%{-webkit-t ERROR CSS: transform: too few values for the property transform.

    Context: -angle,-180deg))}}@-webkit-key ERROR CSS: transform: too few values for the property transform.

    Context: ate-angle,none))}.fa-stack{dis ERROR CSS: Unknown pseudo-element or pseudo-class :host

    Context: -width:0}:host,:root ERROR CSS: Unknown pseudo-element or pseudo-class :host

    Context: :\f3f6}:host,:root ERROR CSS: Unknown pseudo-element or pseudo-class :host

    Context: ight:400}:host,:root}

    0
  • Marko Djurdjevic•210
    @FrozennnSubmitted about 2 years ago

    Overall it wasn't difficult but I had a bit of trouble with positioning information regarding price.

    I was using flex-box and I wanted to use justify-content: space-between for the "Change" text and the rest of the content but it wasn't working the way I wanted it to.

    Later I figured out that because I was using padding the start line was near the middle of the container and so using space-between didn't do anything cause there was no space to begin with. By reducing the padding I managed to fix the problem.

    If you guys have some suggestions on how I could have done this challenge better please let me know.

    Order Summary component using HTML/CSS

    1
    Adrian•160
    @AdrianmbuguaPosted about 2 years ago

    I used grid template areas for that section and justify-self for spacing the music icon and the change text it worked out quite well. will be uploading later

    .plan{ display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "music_icon annual_plan change " "music_icon price change" ; }

    Marked as helpful
    0