Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Oyeyinka Ojora• 170

    @oyeyinkaojora

    Submitted

    How can I achieve the mobile menu, Point me to any tutorials where I can learn to accomplish that particular mobile menu

    News homepage

    2

    Azhar• 600

    @azhar1038

    Posted

    Hi Oyeyinka,

    For navbar try checking out tutorial by Kevin Powell in youtube. It is not exactly for this but he has shared some important tips and ideas that will help you.

    Responsive navbar tutorial using HTML CSS & JS

    Marked as helpful

    0
  • Vijayalakshmi• 50

    @VijayalakshmiGanesh

    Submitted

    I learned how to deal with multiple background image and also positioning them. But position isn't working with all screen size. Also I wanted to know if there is any best way to center a div. I use the following css to center a div div{ height: 22rem; width: 21rem; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; } Not sure if this is a good practice.

    Profile card component

    1

    Azhar• 600

    @azhar1038

    Posted

    Hi Vijayalakshmi, congratulations on completing the challenge!

    For this challenge, positioning those two circles is the most difficult part. You almost got it correct but try positioning those relative to the card itself instead of body.

    For centering the card, you can try using flex or grid instead of using absolute positioning. You may check this article How to Center Anything in CSS Using Flexbox and Grid

    Hope it helps :)

    Marked as helpful

    1
  • Azhar• 600

    @azhar1038

    Posted

    Hi Shaik, congratulations on completing the challenge!

    I see you have used fixed width for text wrapper and image, this is causing the overflow issue in small mobile view. Try using width: 100% instead of fixed value. You will also need to adjust your button to make its width relative

    Also there are 2 different images provided for mobile and desktop. Try using <picture> to display different images based on media query directly from html.

    Regarding using bootstrap for grid, why don't you just use CSS Grid!

    Hope it helps :)

    1
  • Azhar• 600

    @azhar1038

    Posted

    Hi Krishna, Nice work!

    I have few suggestions:

    • Try to use radio button to create the ratings instead of using span as it can cause accessibility issues.
    • When the width of screen is around 700px, the component gets squeezed and then expands around 600px
    • Background of star icon on top left becomes orange upon hovering thus hiding the star

    Hope it helps :)

    Marked as helpful

    1
  • Azhar• 600

    @azhar1038

    Posted

    Hi @Abdul-Hamyd,

    You need to create a default repo named Abdul-Hamyd.github.io and do some settings for github pages to work.

    You may check the docs Github pages

    Hope it helps :)

    0
  • Gustavo de Assis G. Reis• 90

    @gustavoagoncalves

    Submitted

    Hello guys!

    Here's my solutions for this nft challenge. I used sass on this one and did not upload the css file this time so I can see if it will work in someone else's computer. I just tested on mine's and worked perfectly. So, just download the repo and run the sass in your machine and it'll generate the css file so you can see the final result. Thanks everyone \m/

    NFT card using HTML, SASS and flexbox.

    3

    Azhar• 600

    @azhar1038

    Posted

    Hi @gustavoagoncalves,

    May I know why you didn't uploaded compiled css because for the live site you need css?

    It makes it difficult to give feedback because not everybody will clone the repo to check.

    0
  • Wanderson Guedes• 20

    @DevWanderson

    Submitted

    • The part of centering the card became a little complex for me, I found a solution but I feel I could have done it more effectively

    • improvement suggestion?

    Product card using html and css

    2

    Azhar• 600

    @azhar1038

    Posted

    Hi Wanderson, congratulations in completing the challenge!

    To center the card, I see you tried to use flex but then went with transform. You can simply do this:

    body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

    This will bring your card to center.

    I also see that your cart icon is not visible. Your src should be images/icon-cart.svg but you have used /images/icon-cart.svg. The front / takes to root i.e https://devwanderson.github.io/.

    In the challenge two different product images are provided, one for mobile and other for desktop, you can use <picture> to specify which image to load on which screen using media query.

    You should also make your card more responsive by using min-width or max-width instead of fixed width. You should update your media query too so that you switch to mobile view before it compresses to much. Remember the width provided in style-guide are just for reference related to the picture provided or the width that frontendmentor uses to generate screenshot. So, don't just restrict on using those numbers.

    Please update your code link too. It gives 404 currently.

    Hope it helps :)

    Marked as helpful

    1
  • Ali AbuEl3iz• 170

    @ali007-depug

    Submitted

    now Edit it with clean code and better than it first

    product card

    2

    Azhar• 600

    @azhar1038

    Posted

    Hi Ali, congratulations on completing the challenge!

    You can try using <picture> and load the image based on media query instead of loading both images, something like this:

    <picture title="Perfume bottle">
          <source media="(min-width:40em)" srcset="./images/image-product-desktop.jpg">
          <img src="./images/image-product-mobile.jpg" alt="Perfume bottle">
</picture>

    I also noticed this media query: screen and (min-width: 375px) and (max-width: 400px) Now because of this in screen smaller than 375px, your design falls back to desktop mode and breaks. You don't need that min-width and also update your max-width

    You are using fixed height and width on images, try to use max-width for image so that your card can be more responsive in smaller screen.

    Your button is also overflowing your card, so you need to update your spacing.

    Hope it helps :)

    1
  • Jane• 120

    @jvmcpheron

    Submitted

    Any advice on how to make the pop-up for desktop look better?

    I'm not the best at positioning elements outside of using Flexbox or Bootstrap, so this was probably my hardest challenge, and I know it's something I can improve on.

    Article Preview Component

    1

    Azhar• 600

    @azhar1038

    Posted

    Hi Jane, wonderful work there!

    Positioning the popup in desktop was probably the most difficult part of this challenge (at least for me 😅). For x-axis I used % value instead of fixed amount along with translateX and calc to position the popup.

    First you will have to position that section w.r.t that bottom footer where the share button is present, then do:

    .popup {
    left: 100%;
    transform: translateX(-50%);
}

    This will move the center of popup to the right boundary. Then do some calc to negate the padding and half of the share button size to move it left to the center. Check out my solution: Article preview component

    Another accessibility tip, the extra close button that you have added, try to make it a button instead of div and give it an aria-label if you are using some fancy characters which screen readers may not understand.

    One small issue I noticed with mobile view is the size of card changes when share menu opens because author part and share menu have different height.

    Hope it helps :)

    Marked as helpful

    1
  • Azhar• 600

    @azhar1038

    Posted

    Hi Ahmed Ghanem, congratulations of completing the challenge!

    I see that you have broken the heading in to four h4, this is not good. You should use only one heading and let the content wrap automatically. Same goes for the p

    Then the share popup that appears on hover is impossible to click. It goes away as soon as you try to move the cursor. Try using clicks instead of hover.

    Your card position seems to be jumping to a different location when screen size is around 550 - 1000px.

    You should try to change the size too as it looks small and use relative size like min-width or max-width instead of fixed height and width.

    Hope it helps :)

    0
  • Azhar• 600

    @azhar1038

    Posted

    Hi Hunter McGrew, congratulations on completimg this challenge!

    I noticed one small issue in mobile view, when you click on the share button, height of card changes. This is due to different height of share menu and author details.

    An accessibility tip is to use button for share icon instead of div. Since this button contains image instead of text, make sure to give an aria-label and set aria-hidden to the child image. Also you have used section unnecessarily. There is no need to put an image inside section and your header and paragraph can go in same section.

    Try to use hn tags for heading instead of paragraphs.

    Hope it helps :)

    0
  • Azhar• 600

    @azhar1038

    Posted

    Hi Tenzin, nice work there!

    I noticed one small problem, when you switch to mobile view at around 1000px, the cards become too wide. You should add some appropriate max-width to them or even better if you introduce a new design for medium size screen like a 2x2 grid.

    Hope it helps :)

    Marked as helpful

    0