Responsive logo placement - html

Question

I am trying to figure out how to place the logo in the middle of the two sections of my landing page but only on the mobile view. The text class is for my logo. I cant seem to figure out the best way to do so.
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
Here is the codepen: http://codepen.io/anon/pen/xqQPVN?editors=1100

Answer 1

Just give it position:absolute and set it accordingly for mobile devies..
Added the following css in the case of mobile.
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
Codepen link-http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100
Below is the snippet-
* {
box-sizing: border-box;
}
html,
body {
height: 100%
}
img {
max-width: 100%;
}
.item {
width: 50%;
float: left;
top: 0;
left: 0;
height: 100%;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
transition: .2s linear;
}
.nurseryarea {
width: 100%;
position: absolute;
text-align: center;
top: 45%;
color: #fff;
font-size: 30px;
font-family: 'times new roman';
font-weight: bold;
transition: .2s linear;
}
::selection {
color: #ebebe3;
background: #222;
}
::-moz-selection {
color: #ebebe3;
background: #222;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1);
transition-property: background-color;
}
.overlay:hover .nurseryarea {
opacity: 1;
transition-property: opacity;
}
.logo-big {
display: block;
width: 100%;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.imgsize {
width: 40%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
#media screen and (max-width:600px) {
.nurseryarea {
width: 100%;
}
.imgsize {
width: 60%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.item {
width: 100%;
float: left;
top: 0;
left: 0;
height: 500px;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
}
}
<div class="text">
<a class="logo logo-big" href="http://www.lygonstnursery.com">
<img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
</a>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;>
</div>
</div>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;>
</div>
</div>
</div>

Answer 2

If you want to have total control over the positioning i'd say go for progressively specific media queries (say: 425px, 375px, 320px) and use pixel positioning.
If you want to keep it generic, you must be prepared to have some small differences between these sizes, but you can use percentages and the result isn't so bad.
#media (max-width: 425px) {
.text {
position: absolute;
right: 34%;
left: 32%;
top: 34%;
}
}