Skip to content
OverviewSolutions
6
Comments
7

Bogi

@sbogeeBudapest80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Bogi•80
    @sbogee

    Great work with using different layouts!

  • Howslifem8•100
    @Howslifem8
    What are you most proud of, and what would you do differently next time?

    I'm proud of my mobile first design. I used media queries to update the site for larger screens.

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

    The biggest issue I found in my code was the fact that I didn't implement the product image into the card container. The issue with that is my desktop design only looks good if your screen is at 786x px or larger, any weird size and the image looks misplaced. Next time I'll wrap everything in a logical container then format the content as it needs be.

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

    I had issues formatting my text to look like provided screenshots. I changed the font and tried my best at the font-weight but it still looks off.

    Responsive Product Card

    1
    Bogi•80
    @sbogee

    Hi! First of all, it is better to use a separate .css file for your style for better readability. To have the correct format for your text, the font-weight for .Product-Details should be 500. Try to use pixels to set the border-radius. Your button would look better with border-radius set to 10px.

  • Suman Das•110
    @webdevsuman
    What challenges did you encounter, and how did you overcome them?

    Making the title photo enlarge in width during mobile view. I solved it by using Negative margin in media query.

    Responsive Recipe page

    1
    Bogi•80
    @sbogee

    Hi, Based on your answer about challenges, I think that you started the design by the desktop version. I am also a beginner and I have read somewhere that it's a better approach to start with the mobile version. This could have made sizing the photo much easier for you. For example, I have used the mobile-design under 700px width and the image width was 100% with 0 margin. For the desktop version, the white background-part's size doesn't change, image width is 50px smaller with 25px margin. I hope tihs helps. You can check my solution on my profile. :)

  • Bogi•80
    @sbogee
    What are you most proud of, and what would you do differently next time?

    Everything went easily but at the end I couldn't figure out how could I add some space after my main div. Can somebody give me some advice? :)

    Recipe page

    1
    Bogi•80
    @sbogee

    Everything went easily but at the end I couldn't figure out how could I add some space after my main div. Can somebody give me some advice? :)

  • Bogi•80
    @sbogee

    The only difference that I can see is the sizes.

    Marked as helpful
  • Bogi•80
    @sbogee

    It was okay

View more comments