How Can I Keep my Images Static in Vertical Distance During Responsiveness

How Can I Keep my Images Static in Vertical Distance During Responsiveness
0

#1

Hi Folks! Goodmorning!

I’m having an issue with the images in my web app as I try to make the page responsive. My goal is to have the logo image remain the same distance above the large button below it, no matter what size the screen changes too. To that end I have put a media-query such as this into my CSS:

@media(min-width: 320px){
    .top-box{
  position: absolute;
  top: 35%;
  }
}

RT1

I then tried a different media-query such as below:

@media(max-width: 320px)and (max-width: 470px) {
  .top-box{
  position: absolute;
  top: 35%;
  }
}

For that, I get this:
RT1B

How do I prevent there being a distance between the top div with the logo and the bottom div with the button, when I do a responsive test?

Here is my CSS code:

.top-box{
/*border: 1px solid red;*/
width:400px;
height: 100px;  
text-align: center; 
position: absolute;
top: 10%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.logo{
width: 100px;
height: 68px;
 background-image: url("https://s15.postimg.cc/ggl1du463/EQ_Logo2.jpg");
background-repeat: no-repeat;
background-size: 100px 68px;
border-radius: 5px;
margin: auto;
display: inline-block;
}

h3{
text-align: center;
color: white;
font-family: "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: auto;
display: inline-block;
}

h4{
  color: white;
  text-align: center;
  position: absolute;
  top: 60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;

}

.ThreeD-CAD-MODEL{
background-image: url("https://s15.postimg.cc/ssa5m1azv/EQit_Network_Button_2.png");
width:400px;
height: 405px;
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.container-fluid{
/*border: 1px solid green;*/
width:320px;
height: 320px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}

.container-fluid:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,1);
  color: #000;
}

.holder{
/*border: 1px solid green;*/
width:310px;
height: 310px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.circle{
width:220px;
height: 220px;
border: 30px solid #0cff00; /*might make a change to this with power-off green: #008000*/
box-shadow: -1px 0px 25px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.glow-off{
	box-shadow: none;
    border: 30px solid #0cff00;
}

.vertical-rectangle{
width:30px;
height:150px;
background-color: #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
position: absolute;
border-radius: 5px;
top: -25px;
left:95px;
}

.glow-off2{
	box-shadow: none;
}

.make-it{ /*enables shape-form for power button*/
    height: 0;
    width: 80px;
    background-color: transparent;
    border-top: 80px solid #000000;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
position: absolute;
left: 40px; 
top: -45px;
}



body{
background-color: #000;
}

/*....................media queries..........................*/


@media(max-width: 320px)and (max-width: 470px) {
  .top-box{
  position: absolute;
  top: 35%;
  }
}

And here is my HTML code:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="Open Page.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="Open Page.js"></script>
	</head>
	<body>
		<div class="top-box">
			<div class="logo">	
			</div>
			<div class="title"><h3>whatever</h3>
			</div>
		</div>
		<div class="ThreeD-CAD-MODEL">
			<div class="container">
					<div class="holder">
					<div class="circle">
						<div class="make-it">
							
						</div>
						<div class="vertical-rectangle">
						</div>
					</div>
				</div>
			</div>
			<h4>Press to enter</h4>
		</div>
	</body>
</html>


#2

to be honest, I didn’t really understand everything you were saying… but I wanted to point out that if your goal is to have a specific distance between a top element and a bottom element as pictured, you should use absolute only if you have the first element be the immediate closest ancestor of the 2nd element.

on the other hand, what if you used display: grid? and set the grid-gap to whatever you need? Perhaps that would work better…


#3

Well I found the solution to the problem!

See screenshot video below: (distance between the logo and the title text and the large button is now static throughout page-responsive behavior)

html

New CSS code:

.container{
 /*border: 1px solid red;*/
 width: 500px;
 height:700px; 
 position: absolute;
 top: 30%;
 left: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);
}

.top-box{
/*border: 1px solid red;*/
width:400px;
height: 200px; 
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.logo{
width: 150px;
height: 101px;
 background-image: url("https://s15.postimg.cc/xupnhm8e3/EQ_Logo2.jpg");
background-repeat: no-repeat;
background-size: 150px 101px;
border-radius: 7px;
margin: auto;
display: inline-block;
}

h2{
text-align: center;
color: white;
font-family: "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin-top: 15%;
display: inline-block;
font-size: 2.75em;
}

h4{
  color: white;
  position: absolute;
  top: 60%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;

}

.title{
  width: 500px;
  height: 100px;
  position: absolute;
  left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.ThreeD-CAD-MODEL{
background-image: url("https://s15.postimg.cc/ssa5m1azv/EQit_Network_Button_2.png");
background-repeat: no-repeat;
width:400px;
height: 405px;
position: absolute;
top: 83%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.container-fluid{
/*border: 1px solid green;*/
width:320px;
height: 320px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #fff;
cursor: pointer;
border-radius: 20px;
}

.container-fluid:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,1);
  color: #000;
}

.holder{
/*border: 1px solid green;*/
width:310px;
height: 310px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

.circle{
width:220px;
height: 220px;
border: 30px solid #0cff00; /*might make a change to this with power-off green: #008000*/
box-shadow: -1px 0px 25px 7px #0cff00;
border-radius: 100%;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}

.glow-off{
	box-shadow: none;
    border: 30px solid #0cff00;
}

.vertical-rectangle{
width:30px;
height:150px;
background-color: #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
position: absolute;
border-radius: 5px;
top: -25px;
left:95px;
}

.glow-off2{
	box-shadow: none;
}

.make-it{ /*enables shape-form for power button*/
    height: 0;
    width: 80px;
    background-color: transparent;
    border-top: 80px solid #000000;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
position: absolute;
left: 40px; 
top: -45px;
}

body{
background-color: #000;
}

And new HTML code:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="Open Page.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="Open Page.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="top-box">
				<div class="logo">	
				</div>
				<div class="title"><h2>whatever</h2>
				</div>
			</div>
			<div class="ThreeD-CAD-MODEL">
				<div class="container-fluid">
						<div class="holder">
						<div class="circle">
							<div class="make-it">
								
							</div>
							<div class="vertical-rectangle">
							</div>
						</div>
					</div>
				</div>
				<h4>Press to enter</h4>
			</div>
		</div>
	</body>
</html>