Skip to content
OverviewSolutions
7
Comments
3
Fawziyyah Jimoh
@Ziyyahh

All comments

  • Fawziyyah Jimoh•140
    @ZiyyahhPosted about 1 year ago

    Hi, i think you submitted the wrong live site for this challenge.

    You can use CSS grid to solve this project, give the content a class of container, and then you can use this to arrange the layout;

    body {

    background-color: #ecf2f8;

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

    }

    (to center the container div, if you have a footer then add flex-direction: row;)

    To align the container items;

    .container{

    display: grid;

grid-template-columns: repeat(4, 1fr);

grid-template-rows: repeat(2, 1fr);

max-width: 900px;

gap:1rem;

    }

    To alin each container to look like the goal image,

    .testimonial-1{

    grid-column: span 2;

    }

    .testimonial-3{

    grid-row: span 2;

    }

    .testimonial-4{

    grid-column: span 2;

    }

    You may need to do some realigning in your code as that would help easily understand the code, but this is just a basic template to get the layout.

    Marked as helpful
    0
  • Fawziyyah Jimoh•140
    @ZiyyahhPosted about 1 year ago

    To center the div, rather than using margin-top: 250px, you could use

    body{

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    flex-direction: column;(if you have a footer)

    }

    To align the items inside the div, you could use .stuff, which you could replace with container

    .stuff{

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    flex-direction: column;

    }

    The live site is showing a title of document, you could update that in the title element.

    Marked as helpful
    0
  • Fawziyyah Jimoh•140
    @ZiyyahhPosted about 1 year ago

    For easier readability and organisation, generate separate stylesheet for CSS content.

    Check the style guide for the font-family, in this case, it should be body{ font-family: 'Outfit', sans-serif; }

    To make the content more responsive, replace width in main with max-width.

    For styling of properties such as gap, padding, border-radius..... it is recommended to use rem rather than pixels.

    Remember to include the attribution.

    Marked as helpful
    1