how veticaly move div bootstrap? - css

Question

My code:
<div class="container">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<span class="open"><?php include 'opent-stengt.php'?></span>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info"><?php include 'status.php'?></p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Sist oppdatert:<?php include 'time.php'?></a></span>
</div>
</div>
I am trying to move the text down, maybe about 16% on desktop. i also want it to look gott on mobile etc. How can I do this? this is my codepen: https://codepen.io/andve04/pen/MWwJbpb
There is also a bug were the "open" covers the "status" chen minimizing the window? How can i fix this.
Any help is greatly appresicated!

Answer 1

Kindly look at below code and link if it's your expected requirement:
<div class="container w3-animate-bottom">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
</div>
<div class="row">
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<div class="open">OPEN</div>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info">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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Last updated:<?php include 'time.php'?></a></span>
</div>
</div>
URL: https://codepen.io/andve04/pen/MWwJbpb

Answer 2

You should use media-queries, to make the text smaller. Here is an example of all needed media-queries.
/**
* XL
* ---------------------------------------------------------------- */
#media (min-width: 1200px) {
}
/**
* LG
* ---------------------------------------------------------------- */
#media (min-width: 992px) and (max-width: 1199px) {
.open {
font-size: 80px;
}
}
/**
* MD
* ---------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
}
/**
* SM
* ---------------------------------------------------------------- */
#media (min-width: 576px) and (max-width: 767px) {
.open {
font-size: 80px;
}
}
/**
* XS
* ---------------------------------------------------------------- */
#media (max-width: 575px) {
}
You can move the Text down with something like:
.container {
margin-top: 16vh;
}