Skip to content
OverviewSolutions
18
Comments
19
Faisal Ahmed
@faisalahmed11

All comments

  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    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
    0
  • Anderson•40
    @anderson-ssilvaSubmitted over 1 year ago

    Hey guys! That's my solution. Unfortunately I couldn't put the down arrow on the FAQ's question. If anyone can help me I appreciate it.

    FAQ Accordion Card

    1
    Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    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
    0
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    @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
    1
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    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
    1
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    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.

    0
  • Rino•340
    @Rhinozer0sSubmitted over 1 year ago

    Hey guys🫡,

    I would be very happy when some of you check my code. All suggestions for improvement are welcome. I wrote it in SCSS. You can also find the SCSS-file in my repository.

    Thanks, I am grateful for any help 🤝

    Responsive Layout using Grid and Flex in SCSS

    1
    Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    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
    0
  • Erik Samuel Medeiros•180
    @samuerikcoderSubmitted over 1 year ago

    I have 3 questions about Challenge:

    1.Why in mobile dimensions the top of the card is hidden and does not appear at all? how can I solve this?

    2.At some widths the image does not occupy 100% of the screen.

    3.Why did I have to force the image in desktop dimensions to occupy 100% height?

    CSS GRID and FLEXBOX

    1
    Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    Hi there @samuerikcoder, the solution to question 2 is given below.

    just replace your image styles with

    img {
height: 100%;
}
    0
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    Hi there @NathaliaFernandes28, your submission is greatly appreciated, but I have some suggestions for you if you can replace your body styles with

    body {
background-color: hsl(0, 0%, 95%);
display: grid;
place-items: center;
min-height: 100vh;
}

//and main styles with 

main {
display: flex;
flex-direction: row;
// margin-left: 11em;
margin-top: 2em;
}

    it will start looking the same as given in the design.

    0
  • Joachim•840
    @Thewatcher13Submitted over 1 year ago

    What I have learned / practised in this project:

    • box shadow
    • the solution is sometimes not that hard (I've first set the background-picture with pseudo-elements, but it was just a simply background image...)

    What was difficult?

    • I find it sometimes difficult to know what html element that i could use, for example: The price and type of the plan (annual plan/$59.99 ) I was in doubt about using a p or an ul.

    Order summary component

    2
    Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    @Thewatcher13, your submission is greatly appreciated, and you are right on the learning progress, that reduces the difficulty level. and finally, I would say <p> tag is the clear winner and an easy way to go in this situation.

    0
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    Hi there, I appreciate your efforts. It seems that you are not following the difficulty of the projects, you can do so by going to the challenges and sorting them from easier to difficult.

    0
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    It's really a great submission, I would suggest you go to the challenges and sort them from easier to harder and follow the flow. don't forget to continue your learning along with practice.

    1
  • Faisal Ahmed•410
    @faisalahmed11Posted over 1 year ago

    Hi there, by adding body{background-size:contain; background-repeat:no-repeat}

    you will resolve you background issue.

    HOPE YOU WILL FIND THIS HELPFUL.

    1