I just finished a course on html and css on youtube and i hopped on Frontend Mentor. I am having difficulty a lil bit with my responsiveness and i am unsure of my css code, I am open to suggestion/advice on how I can improve. Thank you
Hello developer.
Congratulations on completing this challenge.
I've seen your code and thought I could give you some improvements:
Body {
height: 100wh;
flexible screen;
bending direction: column;
justify-content: center;
align elements: center;
}
.attribution{
align elements: end;
height: 10%;
flexible screen;
}
Now some recommendations:
background image property as this would save you from putting the two images in your container and only changing the value of this property given a breakpointdisplay flex and display grid, we don't always have to use a margin or padding to generate positioning.I hope these comments help you, see you later!
David Rodriguez
how could i improve my code? I'm starting so I just used the basics
Hello developer!
First I would like to congratulate you for completing this challenge! I have seen your code and I bring you some options to improve it:
body{
display: flex;
width: 100%;
height: 100vh;
position:relative;
align-items: center;
justify-content: center;
}
.cartao{
edge: 0;
}
.conteudo{
width: 90%;
margin: 0 auto;
}
.attribution{
position: absolute;
bottom: 5%;
right: 35%;
}
I would also like to give you some advice:
-Do some research on what HTML grouping tags are (We don't always have to use <div></div> to group information)
-Better learn display flex and *display grid. This will help you generate a responsive design in a better way, since you will be using its positioning properties.
-Learn some methodology like BEM or Utilities
David Rodriguez
I liked this challenge a lot, the part I was a bit worried about was the positioning of the testimonials and star rating elements, in the end the solution I found was to use "transform: translateX/Y" to do it. If you have any advice on a better way to do it, thank you very much 😄
Hello developer. I want to congratulate you on the good job you just did!
Regarding your comment, I would recommend that you do some research and learn a bit more about the properties of display flex and display grid
.
Within these themes, there are positions by group and by element. An alternative that could solve the positioning of the star and testimonial divs is to apply an align-self to each element and tell it if it is going to have an align-self: start, align-self: center or align-self: end and with this alternative it would be aligning the elements with respect to the parent div (This way is a better practice than applying a transform)
Believe me that by mastering these themes you will already have 50% mastered CSS
David Rodriguez
Do you have best practice for apply Responsiveness in Tailwind CSS?. If you have any feedback, please tell me, I'm very thankful if you do that.
Hello developer. I want to congratulate you on the good job you just did! Now tailwind is an excellent library and on creating responsive layouts I give you the following tips:
-Allows you to also generate an auxiliary style sheet, since designs often need widths, heights, padding, margins, etc., whose values are not available in tailwind.
So have the confidence to combine all the tools the library gives you and your CSS skills too and trust me you will have the world of CSS in your hands!
David Rodriguez
Any feedback would be appreciated. Always looking to improve.
Hello developer!
First I would like to congratulate you on finishing this challenge successfully. Your design is amazing! I've brought some fixes to your code to make the desktop layout a bit more similar:
body {
overflow-y: hidden;
background repeat: no repeat;
}
.container{
max height: 100wh;
}
.row .col5{
flexible screen;
bending direction: column;
justify-content: center;
}
.btn{
width: 40%;
text alignment: center;
padding: 1 rem 0;
}
I would recommend you review the positioning themes, believe me they will be of great help to generate a design much faster.
Now, I have seen that you have used Bootstrap and I congratulate you for venturing, but do a little more research on the subject and you will realize that there is what is known as custom and this will help you combine the tools of the library with your css skills !
David Rodriguez
problem in responsiveness
Hello developer! I have seen your code and want to congratulate you for completing this challenge. I'm also bringing you some improvements to your code to improve the design layout a bit (desktop only)
body{
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
padding: 2rem 1rem;
align-items: center;
justify-content: center;
display: flex;
}
.logo{
margin-top: 0;
position: absolute;
top: 0;
left: 0;
padding: 3rem;
}
.hero-text, .hero-img{
display: flex;
justify-content: center;
}
.hero-text{
flex-direction: column;
}
.btn{
width: 35%;
}
.icons{
margin: 0 auto;
padding-left: -2rem;
position: absolute;
right: 0;
left: 0;
}
I recommend you study a little more about display flex and display grid, this will help you generate a more organized and maintainable code. Also we don't always have to use margin or padding to make a similar design, believe me that with these two themes you will be able to generate responsive designs and create a pixel perfect!
David Rodriguez
Hello Guy,
Hope you are well. Ideas, suggestions, and comments are welcome
Hello developer! Congratulations on completing this challenge. I have seen your code and bring you some tips and improvements on your code! (Only for desktop layout)
body {
display: flex;
align-items: center;
height: 100vh;
}
.container{
width: 100%;
}
.starts{
padding: 0;
display: flex;
flex-direction: column;
width: 100%;
}
.starts-units{
display: flex;
align-items: center;
justify-content: space-around;
align-items: center;
margin-left:0
}
.extension-1{
align-self: center;
}
.extension-2{
align-self: end;
}
I recommend you study the display flex themes a little more, we can't always use margin or padding to be able to replicate a design. Also this will help you to have a cleaner and easier to maintain code. I hope my suggestions help you, take care!
David Rodriguez
1- I don't know about the best practices and just made it by just tackling problems and solving them. 2- I might not have used best approach to achieve the goal and I really like to know them. 3- I don't know from where to start and the best way to manage code.
Hello developer! I have seen your code and it seems very good to me. Some suggestions I give you:
I hope my suggestions serve you and continue on that path you are on!
David Rodriguez
I had problems with responsible, I still don't know how to work with this area. So I wanted you to give me tips on how I can improve. And how can I improve my code too.
hi dev I've seen your code and wow, you almost achieved pixel perfect! I bring you a fix for the mobile layout:
.card-container{
width: 90%
}
Now there are some suggestions:
I congratulate you for your good code!
David Rodriguez
Hi, developer! Congratulations on completing this challenge! I have seen your layout and in the desktop design it seems to me that you have some details, but, I have brought you some modifications to improve your design!
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.product-card {
width:90%;
height: 75%;
display: grid;
grid-template-rows: 40% 60%;
background-color: white;
border-radius: 20px;
}
@media (min-width: 1440px) {
.product-card{
grid-template-rows: unset;
grid-template-columns: 1fr 1fr;
height: 60%;
width: 50%;
}
}
.image-container{
background-image: url('./images/image-product-mobile.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
@media (min-width: 1440px) {
.image-container{
background-image: url('./images/image-product-desktop.png');
border-top-right-radius: unset;
border-bottom-left-radius: 20px;
}
}
h1,p{
margin: 0;
}
.info-container{
padding-top: 2rem;
width: 90%;
text-align: left;
margin: 0 auto;
box-sizing: border-box;
}
@media (min-width: 1440px) {
.info-container{
display: flex;
flex-direction: column;
gap: 1rem;
width: 85%;
justify-content: center;
}
}
.info-container h1{
font-family: 'Fraunces';
font-size: 2rem;
}
Also, I have some comments for you. 1 If you decide to put an image inside a div, it ALWAYS has to have an alt="" and inside the quotes goes a small description of the image. 2. Never put more than one h1 in each HTML file. Both points will help you obtain a good score in good practices when carrying out the deployment. I hope my comments and solutions will be of great help to you, take care
Every comment is helpful for me
Hello developer!
Congratulations on completing this challenge! I have seen your layout it seems to me that you have some details, but, I have brought you some modifications to improve your design!
body{
width: 100%;
height: 100vh;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Now, if you don't want to stylize the body (it can become a bad practice) I recommend you put all the content you have inside a div and apply the properties that I just gave you (you have to keep the padding: 0 for the body)
All feedback is welcome.
Hi, developer! Congratulations on completing this challenge! I have seen your layout and in the desktop design it seems to me that you have some details, but, I have brought you some modifications to improve your design!
.container{
height: 100%;
display: flex;
align-items: center;
}
.left{
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
media (min-width:1440px){
.left p{
align-self: end;
max-width: 79%;
}
}
Hope my solutions are of some use.
David Rodriguez