Skip to content
OverviewSolutions
7
Comments
29
Faruk Abdulganiyu
@faruking

All comments

  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    Visit this link to help you better understand ranges styling ranges

    Marked as helpful
    1
  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    The link is not working

    Marked as helpful
    1
  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    Good effort! you can only get better.

    • I will suggest you visit this link to learn about media queries, event handler and much more.
    1
  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    Good job! however, your project is not yet responsive and can you be more specific with the 'footer problem' you have.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    Your project is not working yet. Kindly look into it.

    1
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Good job! An observation though, the 'insight' text doesn't blend well on resizing i.e. the last letters are hidden on resize.

    Marked as helpful
    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    One way to do this is using a combination of flex-wrap, justify-content etc. But you might still need to tweak some things. modify the footer class style to:

    width: 100%;
padding-inline: clamp(0rem, -6.107vw + 2.931rem, 1.5rem);
flex-wrap: wrap;
display: inline-flex;
justify-content: space-between;

    after that you can remove the grid-template-column in media queries. Don't forget to also remove the display: grid and grid-template-column in the footer class.

    1
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Good job. This was a difficult one but I completed it. The search functions seems not to work, You can check mine probably, you will find some tips.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Nice design. I completed this challenge as well and it was a fun one. You can check it but I made it with just HTML, vanilla javascript, and it's rule are a little bit more advanced.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    I am not sure there is an official way to that because according to web docs: "If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners". Source

    However, there is a way to go about it. create 2 card class(instead of one) and make sure one is atop the other(one is visible and the other is not) by setting the position of the first card to 'absolute'. Then add box-shadow and border-radius to the one behind while setting a different border-radius for the one at the top.

    Here is a codepen example

    Marked as helpful
    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    I would have told you to use the animation feature of CSS but you can't animate the display and height property of CSS. There are however other ways to achieve the desired result. Let's use plain Javascript code. Add the code below to your javascript file(inside the toggle(i) function after the second line).

    let id = null;
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);
  function frame() {
    if (pos == 50) {
      clearInterval(id);
    } else {
      pos++; 
      description[i].style.height = pos + "px"; 
    }
  }

    Link to explanation Source

    Marked as helpful
    1
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Nice job. What I can add is that you change the width of the card(line 27 css) to 90% to get it closer to the design.

    1
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    The issue I believe has to do with your usage of 'vh' for height and width. When in portrait mode, the containers scale better compared to when in landscape mode(height significantly lower than the width). One solution is to hardcode the width and height using 'px' and combining it with media queries for responsivity, Another one is to use '%' in place of 'vh'(this is actually my fav). Also, I noticed you increased the font-size of the paragraph in mobile mode without increasing the size of its container, this can cause overflow. Lastly, When done with your design, you can use this site called 'responsinator' to preview your site for responsivity.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    You can use flex instead of grid and use flex-wrap to make it responsive but you still have to use media-queries to remove the border-radius in mobile mode. Though grid and flex can be used interchangeably, flex is usually used for arranging items in a single direction(horizontal or vertical) while grid is usually used for arranging items in both directions. Here is a link to learn more about flex link and here is another link to learn about media queries link.

    Marked as helpful
    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    You can check my design for some pointers though it works a bit differently. In my design, you can click on tiles to move them(when there is three tiles each from the players) - which is more tricky.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    You can use 'media queries' to style elements when they satisfies a certain condition like when in mobile mode. Visit this link to learn more. media queries

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Nice design but you forgot to style the text in the button of the last card i.e. the color of the text shouldn't be black.

    0
  • Faruk Abdulganiyu•380
    @farukingPosted almost 3 years ago

    Your design is great(omo iya mi) but I believe it shouldn't fill the screen(just like the design itself). You can reduce the width of the main section by adding margin of 10% at (style.css line 107).

    1