How to create a height div with a prescribed value that decreases when redirecting the screen

Asked

Viewed 59 times

0

I’m having difficulty creating a div in which the width is 580px with the 767px media query, when I decrease the screen the div remains fixed at the same height value. How do I get gif to follow along when redirecting the screen. I made an example gif using the site vice.com/pt_br

https://giphy.com/gifs/JT2H2houQNkjNOOWw6/html5[![ inserir a descrição da imagem aqui

*{
	margin:0;
	padding:0;
}

body{
	background:#f2f0d5;
}

/*----- Div Mobile -----*/
@media (min-width:768px){
	.container{
		display:none;
	}
}

@media (max-width:767px){
	.container{
		display:flex;
		flex-wrap:wrap;
	}

	.col-box-1{
		background:tomato;
		border-bottom:3px solid black;
		width:100%;
		height:590px;
	}

	.col-box-1 img{
		width:100%;
	}

	/*Podem ignorar essa parte*/
	.col-box-1 h3{
		font-family:arial;
		font-weight:bolder;
		text-transform:uppercase;
		color:#f2f0d5;
		font-size:2em;
		text-align:center;
	}
	/*Podem ignorar essa parte*/

	.col-box-2{
		border-bottom:3px solid black;
		padding:0 1em;
		font-family:arial;
	}

	.col-box-2 h1{
		padding-top:0.5em;
		font-size:1.6em;
	}

	.col-box-2 a{
		text-decoration:none;
		color:inherit;
		cursor:pointer;
	}

	.col-box-2 p{
		padding-top:0.8em;
		padding-bottom:1em;
		font-size:0.8em;
	}
}
/*----- Div Mobile -----*/
<!------ Div ------>
	<section class="container">
		<article class="col-box-1">
			<img src="">
			<h3>img</h3> <!--Podem ignorar essa parte-->
		</article>

		<article class="col-box-2">	
			<h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p>
		</article>
	</section>
	<!------ Div ------>

]2]2

html css html5 css3 flexbox

  • You’re gonna use an image inside the div, right? put width:100px and height:768px in div, and in img put width:100% height:100%; Another alternative is to put the image as the background of the div and assign background-size:cover;

2 answers

0

Simple, in the image put the css

<img src="img.jpg" alt="IMG" style="width: 100%;max-width: 300px;">

no. col-box-1 add a text-center

.col-box-1{
 background:tomato;
 border-bottom:3px solid black;
 width:100%;
 height:590px; // EU REMOVERIA ISSO...!

 text-align: center; // ADICIONE iSSO!
}

width: 100% makes her take all side space, max-width speaks the maximum size she can get, below that she will track the size of the div she is, or screen resolution, ie responsive.

ECEMPLO: 

*{
  margin:0;
  padding:0;
}

body{
  background:#f2f0d5;
}

@media (max-width:767px){
  .col-box-1{
    background:tomato;
    border-bottom:3px solid black;
    width:100%;
    height:590px;
  }

  .col-box-1 img{
    width:100%;
  }

  /*Podem ignorar essa parte*/
  .col-box-1 h3{
    font-family:arial;
    font-weight:bolder;
    text-transform:uppercase;
    color:#f2f0d5;
    font-size:2em;
    text-align:center;
  }
  /*Podem ignorar essa parte*/

  .col-box-2{
    border-bottom:3px solid black;
    padding:0 1em;
    font-family:arial;
  }

  .col-box-2 h1{
    padding-top:0.5em;
    font-size:1.6em;
  }

  .col-box-2 a{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
  }

  .col-box-2 p{
    padding-top:0.8em;
    padding-bottom:1em;
    font-size:0.8em;
  }
}
<section class="container">
  <article class="col-box-1">
    <img src="https://i.imgur.com/uTc1gik.png">
  </article>

  <article class="col-box-2">
    <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p>
  </article>
</section>

0

I think you need to use another property to measure the screen in such cases is quite using vh or be viewport height (device screen height);

example of how to use

.header {
    background: #000;
    color: #FFFFFF;
    height: 50vh;
    text-align: center;
}
<div class="header">
  <h1>.header</header>
<div>

References

W3C css Units

Browser other questions tagged html css html5 css3 flexbox

You are not signed in. Login or sign up in order to post.