I have just been given to make the following web page. Now I made the page and I have three notable errors, maybe there are more but I don't realize
Here is the link to my page so far:
The three problems I have are:
- Simulating viewing from a large screen the image above does not look responsive, it looks bad.
- Simulating seeing from a cell phone screen the two images look bad.
- Simulating seeing the image of the footer from a cell phone screen, it is not centered.
Here I leave the Html code where I place the three images, above.
<header class="doble">
<div class="site-header"></div>
<div class="site-mobile"></div>
</header>
And here I leave everything related to these classes in what is the css, "double", "site-header" and "site-mobile".
.site-header{
background-position: center center;
background-size: cover;
min-height: 80rem;
max-width: 100%;
height: auto;}
.site-mobile{
background-position: center center;
background-size: cover;
max-width: 100%;
height: auto;}
@media (max-width: 768px) {
.site-header{
background-image: url(../img/logo\ [email protected]);
}
.site-mobile{
background-image: url(../img/logo2.png);
min-height: 60rem;}
}
@media (min-width: 768px) {
.site-header{
background-image: url(../img/logocompleto.png);
max-width: 100%;}
}
I clarify that I did not use the "double" class, I created it thinking of using it from there but if not, ignore it.
And here I leave the HTML of the footer part
<footer class="site-footer contenedor">
<div>
<img class="imagen imagen-footer" src="img/logos cc hair pro.png" alt="">
</div>
<div class="cr">
<p>Importa, distribuye y comercializa en forma exclusiva en todo el territorio de la República Argentina.</p>
<p>General Alvear 280 - Córdoba (5000) - Pcia. Córdoba - Argentina.
</p>
</div>
</footer>
And the CSS of the footer part:
@media (min-width: 768px) {
.imagen-footer{
float: right;
}
.site-footer{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2rem;
margin-top: 16.6rem;
justify-content: space-between;
}
}
@media (max-width: 768px) {
.site-footer{
margin-top: 7.5rem;
}
.cr p{
text-align: center;
}
.imagen-footer{
display: inline-block;
justify-content: center;
}
}
.cr p{
display: block;
margin-block-start: 0!important;
width: 41.8rem;
}
I add the container of the CSS part although I think it is unnecessary:
.contenedor {
width: 95%;
max-width: 120rem; /** = 1200px **/
margin: 0 auto;
}
Use HTML and CSS in the 'site-header' and 'site-mobile', because I don't know how to use JavaScript or another solution, I understand that it would have been easier with JS but I don't know how to use it.
I hope this helps you :)
For point 1 and 2 you should add the size of the img to 100% to the images, it would be to add background-size (size of the img) and background-repeat (so that the image is not repeated) example:
in this way the images adapt to any width and is responsive.
For point 3 you should add text-align: center to the div that contains the image.
Another thing that I saw, if it helps you, you should remove the fixed width to the texts so that they are not cut in mobile and that they adjust to the width, example in the footer:
Cheers!
DESKTOP
First of all, I wouldn't put the header image as the background of a div , since it's harder to adjust it to be responsive this way; on the one hand you have to adjust the background image and on the other the height of the container, being forced to define a fixed height, since the container has a background but no content.
If you use the img tag it will be much easier.
MOBILE
If you do it the same as with desktop, using img tags instead of defining backgrounds in a div block , it will be much easier for you to adapt them.
MOBILE FOOTER
In order for the footer to appear centered, you have to assign the centering code to the container that the footer image is housed in and not to the image itself. Thus, adding "text-align: center;" to the div containing the footer img , it will be centered.