@paulo-zx
Submitted
@faisalahmed11
@paulo-zx
Submitted
@faisalahmed11
Posted
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
@anderson-ssilva
Submitted
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.
@faisalahmed11
Posted
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
@EstivenMayhuay
Submitted
@faisalahmed11
Posted
@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
All feedback is welcome
@faisalahmed11
Posted
Hi there @waad2lf, here are some suggestions from my side.
#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
@TekketsuDev
Submitted
@faisalahmed11
Posted
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.
@Rhinozer0s
Submitted
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 🤝
@faisalahmed11
Posted
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
@samuerikcoder
Submitted
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?
@faisalahmed11
Posted
Hi there @samuerikcoder, the solution to question 2 is given below.
just replace your image styles with
img {
height: 100%;
}
@faisalahmed11
Posted
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.
@Thewatcher13
Submitted
What I have learned / practised in this project:
What was difficult?
@faisalahmed11
Posted
@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.
@AlexTszChunChui
Submitted
@faisalahmed11
Posted
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.
@mateusceci-coder
Submitted
It´s my first page that i submit, im really new, so any advice or suggestions will be great!
@faisalahmed11
Posted
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.
@BsuleMA
Submitted
Appreciate Feedbacks
@faisalahmed11
Posted
Hi there, by adding body{background-size:contain; background-repeat:no-repeat}
you will resolve you background issue.
HOPE YOU WILL FIND THIS HELPFUL.