I'd love to have some help / code review on the following points:
Hi @alcpereira
Congratulations on completing the challenge !!
Here I have some suggestions to improve it :
First why you have space in mobile preview on right of the image is that because simply that is the actual image width and it doesn't increase it. Actually you have written height : 100% twice. You can just simply remove both the heights and add width : 100% which will also change its height in ratio to its image.
Then also in mobile preview I suggest you give some top and bottom margin too to your card instead of auto.
Also in desktop preview add these to .stats to add even spaces between your .stat (stats components)
.stats{
width: 100%;
justify-content: space-between;
}
This takes the whole card width then spread the items in it with even space between them to justify.
Overall you did great !!
Hope this helps
Happy Coding :)
I'm new to this the css part is little bit difficult to arrange the margin.
Hi @riazahamedsikandar
congratulations on completing the challenge !!
But you have submitted it in the wrong challenge so you can see through that.Also I have some suggestions to improve it
first for margin you can just give it '.main{ margin : 5% auto ;}' . As 5% for top and bottom margin(you can set as you find optimal ) and auto for making it center as it give the element same margin on both left and right making the element center.
Also for desktop view instead of just .main{width: 45%;} atleast increase it to width: 60%; . so that it is more wider. Also remove these from body as in mobile view they don't let us give top margin and also some are superfluous.
display: flex;
justify-content: center;
align-items: center;
position: relative;
Hope this helps :)
Happy coding!!
Hi, any feedback would be helpful. The only thing I had issue with I think is the background colour of the image and lining it up in the top and right sides of the container. Other than I don't think it is too bad. I don't know why when I click preview code it looks different from the screenshot. The screenshot also looks very different from when I looked at my design in the browser. Thanks.
@hannahro15 hi !
Congratulations on completing this challenge. However, I have some suggestions for the same.
first about your question it may be that you designed your project specific to a width which wasn't 1440px as the ss here it takes the image of how your project looks at this width which is a desktop width generally.
HTML: I suggest you make a div around all the written part (like .text)so that its easier to place as all are aligned to each other.
CSS : Here don't repeatedly use the same things and write your code again as you have done for box-1,2,3 and number-1,2,3 and text-1,2,3. as they all have the same style just give them the same class and write the code once only. and in number and text you don't even need to give classes as they have different tags eg:
margin-bottom: 5px; font-family: "Inter"; color: hsl(0, 0%, 100%); } h4 { font-size: 8px; font-family: "Inter"; color: hsla(0, 0%, 100%, 0.6); } /* since they have the same font family you can just give this font family to all */
don't give padding to div since it gives space between img and container instead give padding to text you have wrapped around all the written parts. And also don't give flex-container 100px rather 100% width so that it can place the contents in it all over the .text
.text {
padding: 5%;
width: 45%;
}
.flex-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}
for making it responsive I suggest using flex and making the width and height of the container auto and making the width of the picture 100%
@media screen and (max-width:800px) {
.container {
display: flex;
flex-direction: column;
}
main {
width: auto;
height: auto;
overflow: hidden;
}
img {
width: 100%;
}
.text {
width: 90%;
}
}
for the purple part in the image, you can give the colour to imgdiv and lower the opacity of the img
.imgdiv {
background-color: hsl(277, 61%, 48%);
}
img {
opacity: .5;
}
also, add border-radius to the container
I hope this helps :)
happy coding !!
Attempt 3. Of matching my work with the preview slider of Frontend Mentor. If you have any tips on how to match the projects with the slider of the preview of frontend mentor would be apreciated.
@FranciscoPrado04 Hi!
Congratulations on completing this challenge.
Here I have some suggestions to improve:
First, in HTML at line 25, you have a closing tag </h2> which doesn't have a starting tag. So you can remove that or you can use h2 instead of h3 in .tittle-text. It should also remove the accessibility issue.
Second don't use the <br> tag repeatedly instead just make the width of .tittle-text as width: 100%; this will adjust the text like in the design. And in the future too it's better to not break lines using the <br> repeatedly tag rather use padding to adjust the way you want.
hope this helps
happy coding😃!
@itsekordamilola hi
You did a nice job on this one but :
I have gone through your code and website saw that just HTML is there so use '<link rel="stylesheet" href="style.css">' as in the HTML you have written 'project.css' instead of 'style.css' but your file is named as style.css or you can change the CSS file name to project.css.
Also, push your images folder to Github for images to be live.
hope this helps :)
Happy Coding!
