@gjdias I really like your project, well done!
If you don’t mind, I’ll chip in and try to help too.
The first thing I noticed is that it is not centered properly. You may not have noticed, but it is off-center towards the right. Anyone who has spent time centering with CSS (and by the time you are done with the freeCodeCamp front-end section you will have) should quickly see that it is off-center. This is true for all devices including desktop.
The problem has to do with the alignment of the image. If you look at the image inside of its container, you will see the blank space because you have it floated on the right:
If you want to fix that, you can, but let’s get it responsive first.
First, the quote is an easy fix. You can use margins to center the element:
#text01 {
margin: 0 auto;
}
Since you only want it like this once the screen breaks down, you will want to apply it with a media query. Something like this would work:
@media screen and (max-width: 720px) { /* make sure you use the correct value here */
#text01 {
margin: 0 auto;
}
}
For the image, you can also use the margin auto to center it. You will first want to make it a block element:
element {
display: block;
margin: 0 auto;
}
For the second quote, remove the margin you have, and use margin auto. That will give you a perfect center every time:
#text02 {
/* margin: 5% auto 5% 21.2%; */
margin: 5% auto;
}
And finally add margin: 0 auto to your final container.
And there you have it! Easily fixed by using auto margins. I suggest you work on centering better on desktop in regard to the image. It is definitely possible, but might be tricky. If I were to do it, I might use a combination of display inline-block and text-align center, or I would use flexbox. Anyway, hope the margin thing helped!
