Problem leaving a div Responsive

Question

Well I created a div with a background and a form inside it to leave centralized + 1 soon. html:

<div class="fundobg">
<img src="images/logosecure.png">
<form method="POST" action="#">
<input type="text" name="pesquisar" placeholder="PESQUISAR">
<input type="submit" value="ENVIAR">
</form>
</div> 

css:

.fundobg{
    background-image: url(../images/fundo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 200px;
    display: flex; align-itens: center; justify-contents: center;
}
.fundobg img{width: 100px; height: 100px;}

.fundobg form{}

how are you at the moment:

when I zoom out it doesn’t get Responsive:

i wanted to leave the width of 1280 and inside that widh the logo and a space to seek it, but I’m not getting someone could help me?

Answer 1

Just using the word "responsive" doesn’t help much. Frameworks promise (and deliver) responsiveness, but they will give you standardized results. Make the CSS manually offers more freedom, but it requires more planning: it’s not "I want responsive," it’s what behavior I want.

My first tip would be: use measures relating. For example, if you want your logo not to zoom out, apply a rule similar to { height: 5vh; } which will cause the image to have a height of 5% of the screen’s vertical dimension. In the case of fonts, set a fixed size for the entire document by applying a rule such as html { font-size: 10px; }, and for your elements use the "rem" unit. For example, if you want a 16px font, you would apply the rule { font-size: 1.6rem; }. Why is that? Because when you want to resize the fonts, simply resize the font with absolute drive and all the fonts fixed in rem will automatically fit. Which brings me to second tip...

...use media queries. Just applying percentages won’t help you on very large or small screens. In your case, surely you would want different behaviors on large and small screens. In your case, @media only screen and (min-height: 1000px) { .fundobg>img{ height: 5vh; } }, for example, ensure that only on large screens the image would be 5% of the screen size (smaller screens could use a fixed size). You can use media queries to increase the size of the fixed font as the screen grows - and this value cascadearia.

A third tip is to use min-height, max-width etc values, which can save you media queries. For example, .fundobg>img { height: 5vh; min-height: 100px; } would help you grow as soon as necessary, without diminishing it too much in small canvases.

Fourth tip: place your various elements in containers, preferably flex and grid, with units in percentage, and make more elaborate rules (such as media query) for containers.

Still giving tips, do not establish both height and image width, because then you can end up deforming the image (remember that it is better to use the image of the right size than to scale it). Also avoid putting multiple CSS rules in a single line. Also, to get a CSS DRY, try using multiple selectors with few rules instead of individual selectors repeating the rule (so you can change them all easily). I mean, this...

.a, .b{
    regra 1;
}
.a{
    regra2;
}

...is preferable to this...

.a{
    regra1;
    regra2;
}
.b{
    regra1;
}

... at least for DRY adherents.

One last note: if you want to do CSS manually, consider using the Preprocessor SASS - it will certainly make you more productive.

PS: I’d rather have made a comment, but reputation doesn’t allow.