Skip to content
OverviewSolutions
6
Comments
4
Corfaya
@Corfaya

All comments

  • Corfaya•110
    @CorfayaPosted 12 months ago

    Hi!

    I'm writing to you because I think you forgot to include the .js file!

    Good work :)

    0
  • zeph_w•50
    @ZephaWSubmitted 12 months ago

    I am pretty comfortable with how my work has turned out. The biggest challenge I am currently facing; first is how the page looks after deployment (it is much bigger and doesn't fit as it did prior to deployment). Secondly, how to place the content in the middle of the web page as it looked in the desktop illustration

    Responsive page using CSS grid

    1
    Corfaya•110
    @CorfayaPosted 12 months ago

    Hey! Good job! I'll try to answer your questions.

    I don't know if I understood your first question correctly, but, looking at the preview of the site, it seems to me that margins are missing for mobile viewing from the .testimonial-grid. For example,

    .testimonial-grid {
margin: 50px 0;
}

    To centre all the cards you used flexbox on the body. However, I notice that the container of cards (your 'testimonial-grid') is taking up the whole page. Try setting a width and a height on your container (e.g. 1000x600 px, or some other value, whichever seems more correct to you). In this case, change the flex-direction to 'column' so that the footer does not end up next to the container.

    I'll conclude by suggesting two things:

    • use the required font, you can import it directly from google fonts to CSS. Go to Font Family page, add the required values to the basket and copy the '@import' section as the first line of the CSS. After that, use the font-family property: //CSS font-family property//.

    • you should find in the directory a *.svg for the background quotation mark on the first card. Insert it as background-image.

    I was a bit long-winded, but I wanted to explain myself as best I could. Sorry. Good work!

    0
  • Corfaya•110
    @CorfayaPosted about 1 year ago

    Hello Giorgio! Your code is very clean, congratulations!

    Just remember the Alternative Information (alt) attribute, some users may have to use screen readers. For example:

    <img src="img.png" alt="This is an image" >

    But this is only a detail, not a code problem.

    Well done indeed! Laura

    Marked as helpful
    1
  • Corfaya•110
    @CorfayaPosted about 1 year ago

    Hey! I like your code, you use the combination of selectors very well. I'll just point out a detail that you may have just missed.

    In the challenge, a certain design is required when buttons are clicked. To do this, use the pseudo-class :active. For example:

    button:active { /* CSS code */ }

    In your code, for desktop mode you have inserted the required CSS rule on click before the click happens, while for mobile mode you've left the basic style, without any rule being inserted on click.

    I hope I've been clear and helpful and I apologise in advance if there are any grammatical errors (I'm not a native English speaker). Good work!

    1