Working exercise but I need help.

Community feedback

• 

  AndreiT•20

  @AndreiTihPosted 9 months ago

  I think it looks great. You could add a top margin so the component is a bit lower just like the design, otherwise it's very similar as far as I can tell.

  When you say "stuff" what do you mean? What do you want to make smaller but can't?

  2

  ---

  

  Arthur Resende•50

  @ArthurResendeCPosted 9 months ago

  Hi, @AndreiTih

  By "stuff" I meant all of it, the boxes and its fonts, the images. Maybe I'm not making myself that understandable, and I'm sorry for that (english ain't my home language).

  I say that about the size of things because when I tested the site out on Window Resizer for a 375px screen it doesn't match the challenge design, even though everything seems to be working and visible. I just couldn't match it to the challenge design

  1

  

  AndreiT•20

  @AndreiTihPosted 9 months ago

  @ArthurResendeC

  I see what you mean.

  You could use media queries to change the css applied based on the viewport size.

  Looking at your code I see you've achieved the spacing between each link by changing the top margin, and their size by changing the padding.

  Without changing your approach to styling the page, you could change the padding and top margin on each link on the condition that the viewport's width of a device is <375px

  #links>a>p{
      background-color: var(--grey);
  
      margin-top: 1rem;
      padding: 1rem;
      border-radius: .5rem;
  
      @media (max-width: 375px) {
          margin-top: 0.8rem;
          padding: 0.8rem;
      }
  }
  

  You could do a similar thing for the font and images.

  This will result in a sudden change of size when passing a "breakpoint" but should solve your issue completely.

  If you want the style to be fully flexible and change dynamically you could make use of flex container's flex-grow and justify-content properties.

  As mentioned in the spec, the flex-grow property of flex items within a flex container has a "somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space".

  You could make use of this by changing the links container to have a flex display type instead of block with flex-direction:column. Then each link element could be given a flex-grow factor such that the sum of all factors is less than 1. Also they'd need to be given flex-basis:0 such that the size of each element is fully determined by the grow factor. A full explanation of this is in the spec (the link should take you to the right place in the spec for it)

  Ultimately you then space the elements (that take up less space than the entire container) with the justify-content property set to 'space-between'.

  After all this the #links container will change the size and spacing of the link boxes dynamically with its height.

  You can dynamically change font size with clamp()

  Some example code:

  #links{
      display: flex;
      flex-direction:column;
      justify-content:space-between;
      height:300px;
  
      padding-bottom: 1rem;
      padding-left: 2.5rem;
      padding-right: 2.5rem;
      padding-top: .5rem;
  }
  
  #links>a
  {
      display:flex; /*made this a flex container too in order to center the p. Previously it was centered because of equal padding, but now the entire content of the a box is changing dynamically*/
      align-items:center;
      justify-content:center;
      background-color: var(--grey);
      border-radius: .5rem;
      flex-basis:0;
      flex-grow:0.16; /*Since there's 5 links they'll all sum up to 0.8*/
  }
  

  Marked as helpful

  1

  

  Arthur Resende•50

  @ArthurResendeCPosted 9 months ago

  Thanks, @AndreiTih

  I'll take a better look at the properties and how they work throughout the day to try them at my code without just copying and pasting your reply. I appreciate your effort and time spent here, gave me some good energy to keep up with my Media Queries studies that I've started yesterday...

  Thanks again, have a good one!

  :)

  1

  

  AndreiT•20

  @AndreiTihPosted 9 months ago

  @ArthurResendeC No problem at all, great work so far and good luck with your studies!

  1
• 

  Souhail•510

  @SouhailM07Posted 9 months ago

  Hello Developer , i can make your project look better and optimize it .

  1

  ---

  

  Arthur Resende•50

  @ArthurResendeCPosted 9 months ago

  Hi @SouhailM07,

  If you wish to create a fork and give me a pull request there with your changes I'd give it a look gratefully.

  :)

  1

  

  Souhail•510

  @SouhailM07Posted 9 months ago

  @ArthurResendeC , Done

  Marked as helpful

  1