Fix button location and make things dynamic

This commit is contained in:
PCoder 2019-11-27 17:45:49 +05:30
commit 5df23fb56a

View file

@ -1,18 +1,19 @@
{% load cms_tags %} {% load cms_tags %}
<style> <style>
.head-wrapper { .head-wrapper {
display: table; display: table;
width: 100%; width: 100%;
height: 95vh; height: 85vh;
text-align: center; text-align: center;
background-color: #000; background-color: #{{instance.header_background_color}};
} }
.head-slide { .head-slide {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
color: #fff; color: #fff;
font-size: 85px; font-size: 85px;
} position: relative;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.head-slide .btn-trans { .head-slide .btn-trans {
padding: 8px 15px; padding: 8px 15px;
@ -22,9 +23,10 @@
} }
} }
.head-slide .btn-trans { .head-slide .btn-trans {
align-self: flex-end; position: absolute;
z-index: 2; bottom: 15%;
position: relative; right: 5%;
font-size: 0.2em;
} }
</style> </style>
<div> <div>
@ -32,9 +34,7 @@
<div class="head-slide"> <div class="head-slide">
{{ instance.header_text }} {{ instance.header_text }}
{% if product_url %} {% if product_url %}
<div class="container-fluid"> <a class="btn btn-trans page-scroll url" href="{{product_url}}">{{instance.buy_button_text}}</a>
<a class="btn btn-trans page-scroll url" href="{{product_url}}">Get the deal</a>
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>