Hovering an image using an image

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi again, Ogiji Max! 👋

  Good to see you completing another challenge!

  I have a few suggestions for this solution.

  • Wrap all the elements that have interactivity with interactive elements such as anchor tags.
  • Swap the h3 with h2 or h1. Heading levels must always be in order to give structure to a page.
  • If you decide to write the CSS with the mobile-first approach then I recommend removing the @media only screen and (max-width: 767px). There is no need to wrap the mobile styling with max-width media query.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Ogiji Max•140

  @MaxiTeddyPosted over 2 years ago

  @vanzasetia thanks, how can I center the page vertically, that's my main concern right now

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MaxiTeddy Before trying to center the card, you must first fix the HTML markup.

  • I recommend using the main element for the card instead of using an extra div.
  • It is important to fix the way you use heading tag. Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users might get confused.
  • Like I said earlier, the site is currently missing interactive elements.

  The correct HTML will help you style the page more easily because after that all you need to do is to care about the styling.

  After that, remove the max-width media query. If the base styling is for mobile layout then there's no need for max-width media query. It is important to decide whether you want to go with a mobile-first approach or a desktop-first approach. Otherwise, you keep writing all the styling instead of overwriting the existing style.

  Once all those things are fixed, next, the styling of the card needs to be fixed. The card only needs a max-width to prevent the card from filling the entire page. For the height of the card, I would recommend letting the elements inside the card control its height. This will make the card more responsive and adapt to different content sizes. No media queries are needed for the card to be responsive.

  Now, to position the card in the middle of the page, you can make the body element a flex container. After that, set min-height: 100vh to center the card vertically and still allow the body element to growing if ever needed.

  0