Skip to content
OverviewSolutions
11
Comments
9
Peter
@PeterJan285

All comments

  • Will•210
    @wkan17012021Submitted almost 3 years ago

    Attempted this one to get quicker at turning around these card projects. One thing that i couldn't get to work was the background image (two shades of lilac wave-design): I tried css: background-image: url() property; background-repeat: no-repeat; tried background-size: cover and/or contain; background-position: center;

    I couldn't get the wave feature to be positioned as per the desktop design. For me, the background properties I used above rendered the wave further up the screen. In the end i added the image using html img tag. It would be interesting to know how this was done with more 'elegantly'. Thanks

    order-summary-component

    3
    Peter•170
    @PeterJan285Posted almost 3 years ago

    I dont think bg sliding up is such a big deal, i just checked my solution and its the same. You can click /solutions/wall of fame/ then look thru top devs and their solutions, maybe someone managed to fix it

    <i>"done is better than perfect"</i>

    Marked as helpful
    1
  • MarcinC•20
    @madpiratSubmitted almost 3 years ago

    Hello there! A suggestion on how to make out come of challenge responsive (mobile-friendly) as in example .jpg file is highly appreciated. Have a lovely day!

    Single Price Grid Component

    2
    Peter•170
    @PeterJan285Posted almost 3 years ago

    Watch a tutorial on grid system, to make it responsive you say in grid @media that you want each row to start from point 1 and end on point 12 (watch tutorial on grid) then you say in @media you want width of each row to be width: ?%; you think is the best

    0
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    put transition: 1s ease; on .card-img

    Marked as helpful
    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonSubmitted almost 3 years ago

    Hello there, its another card design again I made. I really need your opinions on this. Please feel free to show your opinion. Thank You

    Responsive Preview Card

    1
    Peter•170
    @PeterJan285Posted almost 3 years ago

    On div with "bottom-details" class, put flex-direction: column; in media queries

    0
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    Try this for background img

    body {

    background-color: var(--violet);

background-image: url(./images/bg-desktop.svg);

background-repeat: no-repeat;

background-size: cover;

background-position: center;

height: 100vh;
    0
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    Wow, the responsiveness of this is amazing, i got the page done but am still struggling with responsiveness

    0
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    How do you make your signature appear just below the main content on page ??? Im trying to figure it out in dev tools but we used different setup. My setup on main container (containing text section and image section) is centered using display flex, align items and justify content = center

    Marked as helpful
    1
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    Wow, you solved layout between "copy" and "reviews" with grid so nicely, im struggling to do it with flexbox. I noticed body background image does not sit well on fullscreen

    0
  • Peter•170
    @PeterJan285Posted almost 3 years ago

    All three cards are switching to flex-direction: column on 1440px horizontal resolution?

    0