Skip to content
OverviewSolutions
13
Comments
17
Minh Khang Tran
@MinhKhangTran

All comments

  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Rhythm Saha, nice Solution!

    I am not that familiar with tailwind, but if you want to center your component you can use

    display: grid;
place-content: center;

    on your main div. The one with min-h-screen bg-gray-900.

    Additionally to that you can change your pt-20 into pt-0 on your second div.

    I hope it is understandable and it helps you.

    Keep coding and have fun doing it πŸ˜ƒ.

    0
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Rohit Kumar, nice solution!

    Your workflow features section is slightly shifted to the left. If you want to center it you can just use justify-content: center; on your workflow-features class.

    I hope this helps 😁

    0
  • George Stawowczykβ€’210
    @Jorgus1710Submitted over 2 years ago

    I used simple margins and padding in CSS to center the card in both mobile and desktop views. I wonder what are most 'common/best practices' for centering something like this card element I made. I imagine using flexbox would be easier and more responsive in the future so I'm eager to utilize my basic knowledge of that in another project.

    QR code solution - no flexbox or grid

    2
    Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi George, nice solution!

    If you want to center your card you can use flexbox on your body.

    For example:

    body{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    For this to work you should delete your margins and paddings.

    on your body: padding: 85px 25px; => padding: 0;

    on your .card: margin: 110px auto; => margin:0;

    I hope this helped.

    Happy Coding and having fun doing it.

    Marked as helpful
    1
  • Dogan Saglamβ€’350
    @dsaglam94Submitted over 2 years ago

    Hello guys!

    I continue my learning journey. I really liked the design of this project so I wanted to make it and put it in my portfolio. Added some personal touches.

    I really love to hear your opinions and recommendations.

    Happy coding y'all!

    Mobile First - Responsive Landing Page

    2
    Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Dogan Saglam, nice solution.

    Your subtle animation at the nav-icon and at the gallery are great!

    I found a small "issue". I just discovered it because I played with the viewport. If you go to mobile viewport and click on the hamburger the navigation opens. This is the expected behavior. But if I change the viewport to desktop the navigation should switch to the desktop Navigation. But your solution shows a slightly distorted navigation.

    Something like this should prevent it:

    // Check if responsive menu is open when resized and then remove
  window.addEventListener("resize", () => {
    if (
      menuToggle.classList.contains("active") && navBar.classList.contains("nav-open") &&
      window.matchMedia("(min-width: 768px)").matches
    ) {
      menuToggle.classList.remove('active');
    	navBar.classList.remove('nav-open');
    }
  });

    This is a very small issue and normal user normally would not resize the viewport like developers.

    Keep Coding and having fun doing it πŸ₯°

    Marked as helpful
    1
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Ratnesh sahu, nice solution.

    I wanted to check your code but unfortunately the link leads to an empty repo.

    On the first sight, I noticed that your design is alinged to the left. If you want to align it horizontally you can use margin-inline: auto on your body.

    Like this:

    body {
    max-width: 1440px;
    height: 100vh;
    font-family: 'Barlow', sans-serif;
    margin-inline: auto;
}

    I hope this helped and keep coding :D

    Marked as helpful
    1
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi, nice solution.

    I just recognized that you didn't use the semantic html <button/> for buttons. It is a good practice to use the <button/> tag for buttons. Using this tag you have accessible benefits.

    You also use a lot of <br/> s to add spacing between your sections. It is better to use css properties like margin or padding to add space.

    I hope these tips helped,

    keep coding and havin fun doing it πŸ₯°

    0
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi, nice solution!

    I'm not familiar with tailwind but you can add this custom css to your body to center your card in the center vertically and horizontally.

    display: grid;
place-items: center;
min-height: 100vh;

    Also you can give your "clock" image the same value for width and height to have a full circle

    p.e.

    .counting img{
   width: 17px;
   height: 17px;
}

    and to center it vertically you can use align-items: center on the parent

    .counting{
   align-items: center;
}

    I hope this helped.

    Keep coding and having fun doing itπŸ₯°

    Marked as helpful
    0
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Headbwoi, nice solution!

    In my opinion your hover animation of the button is a little bit to abrupt. You can use the transition property to have a smooth animation effect.

    p.e.:

    .content form button {
/* Your code above */
transition: all 0.35s ease-in;
}

    Keep coding and having fun doing it πŸ₯°

    Marked as helpful
    0
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Muhamad Rizky, nice solution!

    In my opinion your animation of your arrow in the hero section is a little bit to abrupt. You can use animation-direction: alternate; to have a smooth bouncing effect.

    Keep coding and having fun doing it πŸ₯°

    Marked as helpful
    0
  • Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Sumayyah Fahm,

    I viewed your solution and I think where the problem lies:

    your code is:

     <img class="i" src="images/image-qr-code.png" alt="" width="250px " height="250px" border-radius="18px">

    But in your code there is no directory with the name of images

    To see your image use this instead:

     <img class="i" src="./image-qr-code.png" alt="" width="250px " height="250px" border-radius="18px">

    In your code your image is on the same directory as your html so you should find it with the code above.

    Keep coding and having fun doing it πŸ₯°.

    Marked as helpful
    2
  • BadTβ€’230
    @saodinhSubmitted over 2 years ago
    • Man oh man did I struggle with this challenge. This is the second landing page I have built and I had a lot of trouble making things responsive. This is also the first time I had to implement drop-down menu so I had to look everywhere for example to follow.
    • Does everything look good to you? What would you do differently if you were me? Really hope to hear everyone 's feedback, thanks in advance. <3

    Responsive using CSS Grid & Flexbox, mobile first

    1
    Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Badt, your solution is very nice I like it.

    I just found a small "issue". I just discovered it because I played with the viewport. If you go to mobile viewport and click on the hamburger the navigation opens. This is the expected behavior. But if I change the viewport to desktop the navigation should switch to the desktop Navigation. But your solution still shows the mobile navigation.

    With a small code like this you can prevent this:

      // Check if responsive menu is open when resized and then remove
  window.addEventListener("resize", () => {
    if (
      navBar.classList.contains("mobile-show") &&
      window.matchMedia("(min-width: 768px)").matches
    ) {
      headerNav.classList.remove("mobile-show");
    }
  });

    This is a very small issue and normal user normally would not resize the viewport like developers.

    Keep Going. The struggle was totally worth it. It is a nice solution πŸ₯°

    Marked as helpful
    1
  • Shamil ussain cβ€’70
    @shamilussaincSubmitted over 2 years ago

    Hey guys, here is my 4th frontendmentor project. I am enjoying the journey. Please take a look at my solution. Where i am using two separate image tags for mobile and desktop view. And showing corresponding image based of the screen width. is that the right way to do it ? Or any better solution? your feedback is important. Thank you.

    Responsive Stats Preview Card Component Using CSS Grid

    2
    Minh Khang Tranβ€’510
    @MinhKhangTranPosted over 2 years ago

    Hi Shamil Ussain C, nice solution!

    If you want to use responsive images you can use picture and source with srcset tags in your html.

    For example:

    <picture>
  <source media="(max-width: 1029px)" srcset="./images/image-header-mobile.jpg">
  <source media="(min-width: 1030px)" srcset="./images/image-header-desktop.jpg">
  <img src="./images/image-header-desktop.jpg" alt="image-header">
</picture>

    I found a helpful article at mdn. If you are interested you can read there more.

    I hope this helps. Keep going and have fun πŸ₯°.

    Marked as helpful
    0