Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3

Daniel Zeljko

@danielzeljkoTokyo, Japan50 points

Software Engineer

Latest solutions

  • Responsive Product Preview Card

    #bem

    Daniel Zeljko•50
    Submitted about 1 year ago

    How do we get the project card to have a fixed height without breaking the padding around the project card?


    1 comment
  • Blog Preview Card Using Vanilla CSS and BEM Methodology

    #bem

    Daniel Zeljko•50
    Submitted over 1 year ago

    0 comments
  • QR Component using Vanilla CSS


    Daniel Zeljko•50
    Submitted over 1 year ago

    2 comments

Latest comments

  • irene•120
    @irene-panis
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    learned something valuable as i didn't know about the element, actually had the same problem in a personal project of mine so will be going back and retooling it to use that

    What challenges did you encounter, and how did you overcome them?

    how to change the picture on desktop vs mobile, found some guidance in the frontend mentor discord

    What specific areas of your project would you like help with?

    felt kinda iffy on setting the max-width of the card? also what do i do when the window gets REALLY small (like when im using responsive dimensions in devtools and i just keep making the preview thinner and thinner) because that just shrinks the card and it doesnt really stop shrinking.

    Product card using flexbox & SCSS

    1
    Daniel Zeljko•50
    @danielzeljko
    Posted about 1 year ago

    Nice work, Irene!~

          <picture>
            <source srcset="images/image-product-mobile.jpg" media="(max-width: 767px)">
            <source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)">
            <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum perfume">
          </picture>
    

    We can simplify this by setting the mobile version of the image as the default and only using one source for the desktop image:

    <picture>
      <source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)">
      <img src="images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum perfume">
    </picture>
    

    How'd you get the value of 768px? The readme mentioned desktop resolution was somewhere in the 1100px range.


    I honestly don't think you really need to worry about such small window screens. No one will use a phone that has like 100px width, so the shrinkage really isn't a problem. I didn't see this problem on your live version of the site even using the responsive design mode.

    Marked as helpful
  • P
    John Mirage•1,590
    @john-mirage
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the responsive design.

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    Accessibility

    Product Preview Card Component

    #vite#bem
    1
    Daniel Zeljko•50
    @danielzeljko
    Posted about 1 year ago

    Your solution was 100% spot on! How'd you get the exact units and what's your typical approach when it comes to working on these challenges? Also, I love the modularity of each component.

  • Alfrazgit•50
    @Alfrazgit
    Submitted over 1 year ago

    QR Code Component by Alfraz Ahmed

    2
    Daniel Zeljko•50
    @danielzeljko
    Posted over 1 year ago

    I also have trouble with CSS naming and one of the methodologies I found helpful was BEM. I tried to use this in my most recent solution. I think both height and width for the image was supposed to be 288px.

    Great use of root and props for resetting the browser defaults as well!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub