Skip to content
Submitted about 4 years ago

Html, CSS/SCSS, Flexbox, Grid, Javascript

belma-be•10
@belma-be
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How to add the popup-tooltip?

Community feedback

  • Maxwell Ihiaso•135
    @Maxwell-ihiasoPosted about 4 years ago

    Hello Belma-Be,

    I am trying not to have a feeling that you rushed this challenge. First of all, nice work! Personally, I would love to see an update on your solution.

    For the popup-tooltip, my approach will be to create a div that will house this section.

    <div class="popup-tooltip">
        <div class="popup-tooltip-content">
          <span class="popup-tooltip-icons ">Share</span>
          <img class="popup-tooltip-icons " src="images/icon-facebook.svg" alt="Facebook">
          <img class="popup-tooltip-icons" src="images/icon-twitter.svg" alt="Twitter">
          <img class="popup-tooltip-icons" src="images/icon-pinterest.svg" alt="pinterest">
        </div>
        <div class="popup-tooltip-button">
          <img src="images/icon-share.svg" alt="Share">
        </div>
    </div>

    This newly created div will be styled to what you want the tooltip to look like. It has to be styled dependent on the device-width. So, different styling for different chosen 'media queries'.

    As general feedback,

    You do not need to define @media screen and (max-width: 425px) since you already defined @media screen and (min-width: 426px). Any styling outside @media screen and (min-width: 426px) will style the HTML to your desired screen width which is 426px.

    for your mobile version:

    • Include overflow: hidden to the card properties. This will trim the top corners of your card-image to inherit the border-radius set within the card property.

    • The btn within the card-footer should have a background-color and set it's border-radius to 100% to make it a complete circle.

    For your Desktop version;

    There's a lot adjustment to make for the desktop version some of which includes:-

    • The card-image should not have equal spacing as the card-article.

    • Transitioning from mobile view into desktop view (at 427px * 657px), the card becomes blown out of proportion. Try capturing this in your CSS.

    -You can set card to have max-width so that it does not get to stretch over the entire viewport. setting 'margin' to auto (particularly margin-left and margin-right') will also help to card at the center of the viewport.

    -the body element should also have some padding so that the card may have spacing between itself and the body of the viewport (especially when the viewport is moving from the desktop view - mobile view.

    These are the few changes I would want you to start with Belma-Be

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord