Working exercise but I need help.

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

@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*/
}

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!

:)

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

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.

:)

@ArthurResendeC , Done