Skip to content
OverviewSolutions
18
Comments
19

Faisal Ahmed

@faisalahmed11Pakistan410 points

Front-end Web Developer, with practical knowledge of HTML, CSS, JS, React.js, and Next.js,

Latest solutions

View more solutions

Latest comments

  • Faisal Ahmed•410
    @faisalahmed11

    Hi there @paulo-zx, your design implementation is almost perfect, just missing a full-screen height,

    .container {
//height:575px 
min-height:100vh;  
}
    Marked as helpful
  • Faisal Ahmed•410
    @faisalahmed11

    Hi there @anderson-ssilva. I greatly appreciate your efforts.

    you can try this, it might solve your down arrow icon issue.

    .container__FaqItem__label::before{
content=""; 
height: 1rem;
aspect-ratio: 1;
background: url("../images/icon-arrow-down.svg") no-repeat;
}

.container__FaqItem.ativo .container__FaqItem__label::before {
//content="-"
transform:rotate(180deg)

}
    Marked as helpful
  • Faisal Ahmed•410
    @faisalahmed11

    @EstivenMayhuay congratulations on completing you challenge; I have some suggestions for you.

    .bg{
background-repeat: no-repeat;  // it will show bg image only once.
}

main{
max-width: 1540px; // making a max width, so that it doesn't get too wide on large screens.
margin-inline: auto; // forcing it to center horizontally
}
    Marked as helpful
  • Faisal Ahmed•410
    @faisalahmed11

    Hi there @waad2lf, here are some suggestions from my side.

    1. centring items.
    #container {
min-height: 100vh; // forcing container to take a minimum of the screen's height.
display: flex;
justify-content: center; // centring on the main axis, in this case horizontally.
place-items: center; // centring on the cross axis, in this case vertically.}
    Marked as helpful
  • Faisal Ahmed•410
    @faisalahmed11

    Hi there @TekketsuDev, you submission is greatly appreciated, if you don't mind I have some suggestions for you.

    // if you replace you .card{} styles with.
.card {
padding: 2.2rem;
max-width: 16rem;
display: grid;
gap: 1rem;
}
// explanation, your were missing a width limit (max-width) for large screens and some spaces b/w (gaps ) different elements. 



// and add margin-block: 6rem 3rem;  into you button{ } styles 
// here margin-block will add some margins from top and bottom

// and also update your @media query max-width with this max-width:700px

    it will start looking more like the design.

  • Faisal Ahmed•410
    @faisalahmed11

    Hi there @Rhinozer0s, here are some suggestions from my side.

    //replace you body{ } styles with
body {
//width: 100%;
min-height: 100vh;
background-color: hsl(233, 47%, 7%);
display: grid;
place-content: center;
}



// and your @media query  main{ } styles with
.main {
max-width: 75rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-inline: 1rem;
//border: 0;
border-radius: 8px;
overflow: hidden;
}



// and also, replace your  main.picture img{ } styles with
main .picture img {
display: block;
width: 100%;
mix-blend-mode: multiply;
filter: contrast(0.65);
height: 100%;
object-fit: cover;
}

    above improvements are especially good for responsiveness.

    Marked as helpful
View more comments