Skip to content
OverviewSolutions
7
Comments
9
Magda
@magdaszsz

All comments

  • Magda•235
    @magdaszszPosted over 2 years ago

    The reviews part doesn't look very good on desktop. How about trying implementing a library like swiper JS to make it work better.

    Marked as helpful
    0
  • Magda•235
    @magdaszszPosted about 3 years ago

    The github link to your code gives 404 error.

    I like your layout for tablet. Very nice. Also, when you change from daily/weekly/monthly, the text at the bottom of the card also should change to 'last day/last week/last month'. For you it stays the same, only the number of hours change.

    1
  • pierre-pellegrino•970
    @pierre-pellegrinoSubmitted about 3 years ago

    It's been a long time since I made the last challenge from FrontEndMentor. It was fun to make.

    Still I could not figure out how to use my json file with fetch and I tried many ways but nothing worked, so I cheated a bit and just created an object containing data.json

    Time Tracking Dashboard

    1
    Magda•235
    @magdaszszPosted about 3 years ago

    You fetch it like you fetch from an API. fetch('data.json') .then(res => res.json()) .then(data => console.log(data))

    with this snippet you'll see that you're logging the data.

    0
  • Magda•235
    @magdaszszPosted about 3 years ago

    It looks mostly how it's supposed to look, only the text on the white background is very light. It's barely visible, I'd make it darker. You could add a different grid layout for tablets for example, if you want to make it even better. Also, on desktop, you don't need 12 columns, only 4. There's no point in creating more columns than needed. Each would be the width of the least wide elements, the top purple and the bottom dark gray, would take 2 columns.

    Marked as helpful
    1
  • Magda•235
    @magdaszszPosted about 3 years ago

    There is no background on the navigation on mobile and it makes it barely visible. Also, on mobile, "stand out to the right audience" part isn't all visible.

    0
  • Bogdan-Mihail Pavel•625
    @codeguy9Submitted over 3 years ago

    How I can center the div vertically? I don't know why there are so much errors on my solutions. I really can't understand them. There are too much rules to obey, you actually forget the delight of coding.

    HTML, CSS, FLEXBOX

    3
    Magda•235
    @magdaszszPosted over 3 years ago

    To center the card, you can add an additional container around the main div and give it those styles

    .container {
  height: 100vh;
  display: grid;
  place-content: center;
}

    also, it would be great if you could make it responsive for mobile screens.

    1
  • Luis Colina•1,043
    @Comet466Submitted over 3 years ago

    i was gonna take a break but as soon as i watch his layout i had to do it, a love the color palette and i always enjoy doing grid layouts, can somebody tell me a proper way to change the color of SVG elements? i try my best with the filter property but didnt quite match the color of the footer logo, happy coding

    Sunnyside Landing Page || CSS HTML JS

    3
    Magda•235
    @magdaszszPosted over 3 years ago

    For inline svgs I usually do svg path { fill: color}

    1
  • Magda•235
    @magdaszszPosted over 3 years ago

    It's not responsive at all. You should at least make it work on small mobile screens.

    0
  • Fraser Watt•1,790
    @fraserwatSubmitted over 3 years ago

    This was a fun one!! Trickiest part was working with images sizes, definitely the thing in front end I find hardest.

    Still not 100% pleased with the "Graphic Design" / "Photography" section and how that changes at different page widths, so any pointers on how to approach this so the image responds more smoothly (and I don't have to rely on background colours at some points) v much appreciated! 😎

    ☀️ Sunnyside Landing Page 🍹

    3
    Magda•235
    @magdaszszPosted over 3 years ago

    Looks pretty good :) I also struggle with images. I'm still doing my version and I think I switched between putting the images as backgrounds and inline elements several times.

    0