width adaption, jewellery site construction

This commit is contained in:
fr34k 2020-11-01 00:13:03 +01:00
parent a78438bf37
commit 775900e27f
3 changed files with 46 additions and 32 deletions

View file

@ -25,7 +25,7 @@
</header>
<?php
if ($show_sep == true) {
print('<img style="filter: brightness(110%) contrast(80%); position:relative; top: 90px; width: 100%; height: auto" src="/images/background_img/dev_con.jpg"/>');
print('<img style="filter: brightness(110%) contrast(80%); position:relative; width: 100%; height: auto" src="/images/background_img/dev_con.jpg"/>');
}
?>

View file

@ -7,43 +7,34 @@ include('header.tpl');
<div class="jew_container">
<div class="flexbox-jew-btn">
<div class="jew-btn-container">
Button1
<a href="#">Rings</a>
</div>
<div class="jew-btn-container">
Button2
<a href="#">Cufflinks</a>
</div>
<div class="jew-btn-container">
Button3
<a href="#">Amulets</a>
</div>
<div class="jew-btn-container">
<a href="#">Necklace</a>
</div>
<div class="jew-btn-container">
<a href="#">Pins</a>
</div>
<div class="jew-btn-container">
<a href="#">Earrings</a>
</div>
<div class="jew-btn-container">
<a href="#">Objects</a>
</div>
<div class="jew-btn-container">
<a href="#">Oak</a>
</div>
<div class="jew-btn-container">
<a href="#">Other</a>
</div>
</div>
</div>
</div>
<div class="jew_container">
<div class="flexbox-jew-btn">
<div class="jew-btn-container">
Button4
</div>
<div class="jew-btn-container">
Button5
</div>
<div class="jew-btn-container">
Button6
</div>
</div>
</div>
<div class="jew_container">
<div class="flexbox-jew-btn">
<div class="jew-btn-container">
Button7
</div>
<div class="jew-btn-container">
Button8
</div>
<div class="jew-btn-container">
Button9
</div>
</div>
</div>
</div>
<?php include('footer.tpl'); ?>

23
tmp Normal file
View file

@ -0,0 +1,23 @@
@media only screen and (min-width: 1000px) {
header {
z-index: 1;
position: absolute;
top: 0px;
width: 100%;
}
}
@media only screen and (max-width: 500px) {
.nav li {
margin-left: 2px !important;
margin-right: 2px !important;
width: 20vw;
}
}
@media only screen and (min-width: 501px) and (max-width: 999px) {
.nav li {
margin-left: 2px !important;
margin-right: 2px !important;
width: 100px;
}
}