I think that my css its nor organized so some tutorial or guide on how to make it look good for other people would be great also there is something that i tried to do in the css when you do a media and was like this:
@media(max-width: 800px){ main{ grid-template-areas: none; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); width: 80%; min-width: 600px; } }
But didnt work because all the elements where overlapping each other.
Any kind of help its welcome, if you think that the responsiveness could be better done or the markup or something else ill be pleased to hear. :-)
I think that making the page responsive in a good way is my problem, any help is welcome.
I am new to this kind of development so if you have comments ill be greatfull to know.
Doint it responsive, i dont know how to do it but im open to learn
I will need to create more projects to still better in my CSS abilities
What challenges did you encounter, and how did you overcome them?How to make the content inside of the box responsive with small screens and i just put relative sizes to fixed that.
What specific areas of your project would you like help with?Responsiveness
Hi Mathias congrats on completing the challenge. There is some things to imrpove in your code.
1)Remember to write semantical html, use main instead div,etc. If you want more information about Click this
2)I saw that you used a grid on the body and then you created a container with flex to center the content, instead of creating that div you could aply the styles directly on the body this way:
.body{ display: flex; justify-content: center; align-items: center; height: 100vh; }
This would center your content(In this case your box div) vertically and horizontally.
3)If you want to improve all the things related to responsiveness Click this It help a lot when i began.
Hope it was helpfull and have a great day.
Hi Nikhila-DN great job finishing the challenge. There are some things you could do to make your page look even better
1)I saw that you tried to do an grid aproach to make the challenge but its look more like a flex implementation. Let me explain
You are creating 3 columns in your html and then you are using them in grid like this:
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'column1 column2 column3' 'column1 column2 column3'; }
So it could be more easy just to do
.container { display: flex; }
But i think that this isnt the right aproach. So how can we manage to it better? There is one way to manage that all the elements in grid have the same size and also have the position that we want and is using grid template.
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: '. card-2 .' 'card-1 card-2 card-3' 'card-1 card-4 card-3' '. card-4 .'; }
This would solve on how to make the layout, to add responsiveness make sure to asign a width:100% and a min-width. Also dont forget to name the card elements on their respective element to make sure this works.
2)In some parts of your code your pre fixing your font-sizes, margin and padding. This would help you understand why that its a bad practice and would make you improve: ems and rems
That's all hope it was helpfull and have a great day ^^
Hi Damiro Gómez congrats on completing the challenge. There's some tips to improve your project and the next ones.
1)Remember to use em and rem units in some of the properties like paddings and margins. If you need help on that click this.
2)I dont know if its only me but i cant see your images, i think that may be a problem adding the url correctly, also there's a lot of ways on making images responsive and changing theme depending on screen sizes for more infoclick this.
3)You could aplly the fonts directly on the elements that its need. For example on your code i noticed that the big price isnt with the correct font family so you could change it by making this.
.element { font-family: 'Fraunces', sans-serif; }
Hope it was helpfull and have a great day ^^
Hi Shubham Kumar great job finishing the challenge.
I want to comment some things.
First of all, it will be good if you could make the Readme file, it wont affect if you dont do it but its good practices and make that the people who read your code could understand better what are you doing.
Also here in this community at the time of sending your code add something you need help with and that kind of things.
About your code, you did a great job the only thing that i could say its that some of the font colors are not what the challenge wanted but are changes that could be done fast.
In the preparation time section, give some space between the h2 and the list.
Have a good day. :)
Style is similar to the first to challenges, no major changes.
What challenges did you encounter, and how did you overcome them?Nothing :)
What specific areas of your project would you like help with?Nothing :)
Great work i dont have many thinks to say, only i think that when you are doing your html, you are creating an extra div that may make it more confusing and less semantical. Thats all ;)
Hello Ivan Kozulic
Well done finishing the challenge.
There are some details that i would like to tell you about your code.
In the index.html, i think that you could make the code to be more semantic, making the sections of your code with the <section> or <main> or <footer> instead of doing it all with <div>, thats all. Great job <3
