Avatar for AlexBueckig

Alex

@AlexBueckig Germany

Mentor Score

1,070

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

No solutions submitted

No solutions submitted yet

Latest Comments

  • RE: Nikkita Leftwich's "Price Grid w/ HTML & CSS" solution

    1

    Hi nlefty,

    Your solution looks great. As you already mentioned, there is one slight issue with your media queries. Your content starts to overflow and creates horizontal scrolling starting from 960px. One thing that'd get around the issue quite easily is to set your current breakpoint to something like 970px. Furthermore you can then add a max-width: 600px; with a margin: 0 auto; to your .wrapper class for the mobile part. And if you don't like your elements being pushed all the way to the corners of the viewport, just add padding: 0 1em; to your .wrapper aswell. That should make it, hopefully... 😃 Didn't test it myself, just went through it in my head real quick. 😇

    And I saw you are using a desktop first workflow! How about trying to use mobile first for your next project! 😃 It's the preferred workflow nowadays because it makes mobile devices load less style-information which is better for optimization purposes.

    Another advantage is that you don't have to use any special layout tools for mobile, you can mostly just use block level elements which is the default behavior. That means that you have to reset way less code when doing the desktop parts of your layout in your media queries later on. Less code means less work and better maintainability in general. 😇

  • RE: pranavbegade's "Tried to do this with absolute positioning only - not responsive" solution

    1

    Hi pranavbegade,

    I noticed you used absolute positioning in both of your submissions a lot. If you are unfamiliar with other layout techniques CSS has to offer you I'd start with learning flexbox to start with. Especially if you want to make your layouts responsive. Right now your desings only work for one screen size and as soon as you start resizing the page to try to fit it on a mobile screen size it get messy pretty fast.

    There are quite a few free courses out there to give you a great entry point in creating responsive websites. Here is one I can recommend myself, its totally free and I really like the interactive approach scrimba took on teaching. https://scrimba.com/g/ghtmlcss If you already feel comfortable with the basics of html you can skip forward to lesson 21, but I'd advise you to at least have a quick look at the earlier lessons. It's always great to re-hear things you already know, maybe you'll even learn new tricks you didn't think about earlier.

  • RE: Vaibhav Chandak's "Four card feature section master solution using HTML and CSS" solution

    2

    Hi Vaibhav,

    I saw you used position: absolute; to position your cards. I'd recommend you to use the layout tools provided by CSS like flexbox or grid to position your elements instead of using position: absolute. You can find good tutorials on how to use them here: https://www.frontendmentor.io/resources

    I'd pick flexbox to start off with and when you are pretty familiar with it I'd have a look into grid. Both of them combined will allow you to create all kinds of amazing layouts.

  • RE: Teng's "Single price grid compontent | flexbox" solution

    1

    Hi pyteng,

    your solution looks amazing, good job! 👍

    One really small thing I noticed is that the bottom borders are not display correctly for desktops. The why us section still has borders on the bottom left and right while the subscription section has no border. 😉