Skip to content
OverviewSolutions
3
Comments
7
Maxwell Ihiaso
@Maxwell-ihiaso

All comments

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

    Hi Joy,

    Your solution is almost good, how about making a few adjustments?

    Mobile Version

    • The image seems to take up so much space once the viewport is scaled up. Try defining a fixed width and height.
    • the text class could need some more padding. text-1, text-2, and text-3 appear to be to close to the container.
    • The active state for the share button is expected to fill the bottom of the container on click. However, you have it inherit the desktop active-state view style. Try using positioning (parent - {position: relative}; child - {position: absolute}) to have it put in place. Use the necessary parameters to have it meet your taste.
    • Also reduce the opacity for the SHARE in the active state.
    • The active state container could use padding to make it nicer.
    1
  • Maxwell Ihiaso•135
    @Maxwell-ihiasoPosted about 4 years ago

    Hi Hammercait,

    A nice design you've got here. I like it.

    How about setting max-width for the desktop version, and margin: auto to keep it centered. This should prevent the page from stretching out of proportion on a larger screen.

    Also, the link to view your code doesn't work. Try fixing that too (edit your solution and cross-check that the link to your GitHub repository has been correctly inputted.

    Outside these adjustments, your design looks good.

    1
  • Dmitry•375
    @dmitrymitenkoffSubmitted about 4 years ago

    I really struggled with implementing CSS for pop ups on active state in this challenge. I ended up creating an absolutely positioned child element within a relatively positioned parent element. While this approach worked well, I felt it was more of a hack rather than a normal industry practice. I was wondering if anyone might know how these types of components/cards are designed in real life, eg is it OK to use something like Bootstrap to save time? My second question is about the best tool to use for the layout. I ended up using a little bit of Flexbox on some divs to help me with manipulating elements in an easier way, but I also used floats in mobile veiw. I tried using Grid and felxbox on the mobile layout and they simply didn't work due to fluid widths and heights of the elements in flexboxed divs or grid divs.

    Mobile first using flexbox, and grid for centering, and JS

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

    Hi Dmitry,

    Nice design! I like the design. somewhat rigid yet cool. :v:

    Here's my thought about the best tool to use for the layout. :sparkles:

    Funny thing is no tool should be termed as best. I would rather master one tool and be confident using it. If I can deliver a neat, functional, and dynamic code with that single tool, I would be fine. I always see myself using flexbox most of the time (my go-to tool for layout).

    About your code, your mobile view could use some padding-bottom it appears to be close to the bottom.

    Great work again!

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

    Hello Mohamed ,

    How about ensuring you have one view (desktop view) done and dusted before moving to the mobile view(* I would prefer a mobile-first - where you build the mobile version first before moving over to the Desktop version *)

    Lucky you! The frontend Mentor profile page comes with a report that looks out for accessibility and HTML issues. That will be a good issue to fix first.

    Your code is not responsive and may not be nice to view once the viewport is gradually scaled down.

    The desktop version has also failed to make good use of available viewport. Content looks disoriented and sidelined.

    Ids are unique and can only be used once however, you have used one (1) id multiple times.

    I will look forward to viewing an updated solution. Nonetheless, great work so far. I believe more can be done Mohamed.

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

    Hello Seck Mamadou,

    A nice design you've got here.

    Well, you still need some work on it. It is not responsive when the viewport is adjusted. Also, the desktop view seems to be positioned to the left. How about you make the whole content responsively centered on desktop view.

    Keep up the vibe!

    0
  • 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
  • Robert McGovern•1,075
    @tarasisSubmitted about 4 years ago

    I have 3 questions:

    1. Desktop version: How do I fake click the tooltip away when I cross over into the mobile version?
    2. Desktop version: I had to not use overflow: hidden in .artcilePreview because it would crop the tooltip/callout, which meant I had to apply a border-radius in .previewImage. Was there a way to have used overflow: hidden in .artcilePreview but had the callout go outside the bounds of the component?
    3. Is there a way to have the value used for the media query and the javascript as the break point be read from file? I dislike hard coding it in both because then you would have to remember to edit both

    Things I know I could do better:

    • Comments
    • less PX, more rem/em.
    • sectioning CSS better

    --- Edit

    On the original submission I saw there was an error about using a div inside the button. This lead me to fixing a question I had previously asked. (why on my desktop solution the share button was jumping when the tooltip was visible)

    APC: Mobile first, vanilla CSS & JS.

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

    Hello Robert McGovern,

    you really took the time to deliver this version of your challenge. I like that it appears like a copy of the original challenge. Good Job! I am super impressed.

    About your question (2):

    It's not possible to have <mark style="background-color: grey">overflow: hidden</mark> as a property of an ancestor and have its descendant seen in any of the outside areas.

    Well using CSS alone may not achieve this even if the z-index is played with. One way I may tackle this is to have the <mark style="background-color: grey">tooltip</mark> positioned outside of the ancestor with property <mark style="background-color: grey">overflow:hidden</mark>, then style it to fit. However, adjusting the viewport may create issues with positioning. This is where you would have to use Javascript to assist with responsive/dynamic positioning while targetting <mark style="background-color: grey">share button</mark>

    2