Commit 7fe4a723 authored by Leila's avatar Leila

responsive homepage

parent 6654905e
......@@ -5196,20 +5196,29 @@ main {
margin-left: 15px;
margin-bottom: 70px; }
@media (max-width: 568px) {
.group-menu .btn-group {
float: right;
margin-top: 10px; }
.group-menu .btn-group .btn {
height: 39px !important; }
.group-menu .form-group input {
float: left;
width: 65%; }
.group-menu .form-group .search {
float: right; } }
.search {
margin-right: 1px; }
.search .fa-search {
float: right;
height: 26px; }
@media (min-width: 517px) and (max-width: 768px) {
.search {
display: none; } }
.menu {
margin-left: 5px;
margin-top: 6px;
float: right; }
@media (min-width: 517px) and (max-width: 768px) {
@media (min-width: 568px) and (max-width: 768px) {
.menu {
margin-top: -45px; } }
......@@ -5267,6 +5276,13 @@ main .contact {
.article {
width: 100%; }
@media (max-width: 568px) {
.article {
margin-bottom: 50px; }
.article .left {
float: none !important; }
.article .right {
float: none !important; } }
.article .left {
float: left; }
.article .right {
......@@ -5276,6 +5292,9 @@ img {
display: flex;
margin: auto;
max-width: 30%; }
@media (max-width: 568px) {
img {
display: none; } }
.title-article {
width: 100%; }
......@@ -5291,9 +5310,13 @@ img {
.article-body {
width: 50%;
height: 30%;
padding: 10px 10px 10px 10px;
padding: 10px;
border-radius: 5px; }
@media (min-width: 517px) and (max-width: 907px) {
@media (max-width: 568px) {
.article-body {
float: none;
width: 100%; } }
@media (min-width: 568px) and (max-width: 907px) {
.article-body {
height: initial; }
.article-body .intro_pic {
......@@ -5316,7 +5339,10 @@ img {
float: right;
font-weight: bold;
margin-top: -20px; }
@media (min-width: 517px) and (max-width: 907px) {
@media (max-width: 568px) {
.article-body .readmore {
padding-top: 15px; } }
@media (min-width: 568px) and (max-width: 907px) {
.article-body .readmore {
margin-top: 22px; } }
.article-body .readmore a {
......
......@@ -40,22 +40,23 @@
</button>
<a class="navbar-brand" href="{% url 'post' %}">Cuisine entre amis</a>
</div>
<div class="btn-group menu">
<button class="btn dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expended="false">
<i class="fa fa-bars"></i>
menu
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<li><a class="dropdown-item" href="{% url 'post' %}">Articles</a></li>
<li><a class="dropdown-item" href="{% url 'contact' %}">Contact</a></li>
<div class="group-menu">
<div class="btn-group menu">
<button class="btn dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expended="false">
<i class="fa fa-bars"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<li><a class="dropdown-item" href="{% url 'post' %}">Articles</a></li>
<li><a class="dropdown-item" href="{% url 'contact' %}">Contact</a></li>
</div>
</div>
<form method="get" action="{% url 'search' %}" class="navbar-form search-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" name="q" value="{{ request.GET.q }}">
<button type="Submit" class="btn btn-default search"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<form method="get" action="{% url 'search' %}" class="navbar-form search-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" name="q" value="{{ request.GET.q }}">
<button type="Submit" class="btn btn-default search"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
</nav>
<main>
......
......@@ -7,3 +7,5 @@ django-debug-toolbar-template-timings
django-kombu
django-webtest
factory-boy
django-taggit
Pillow
......@@ -4,6 +4,31 @@ main {
margin-bottom: 70px;
}
.group-menu {
@media(max-width: 568px) {
.btn-group {
float: right;
margin-top: 10px;
.btn {
height: 39px !important;
}
}
.form-group {
input {
float: left;
width: 65%;
}
.search {
float: right;
}
}
}
}
.search {
.fa-search {
......@@ -12,10 +37,6 @@ main {
}
margin-right: 1px;
@media(min-width:517px) and (max-width:768px) {
display: none;
}
}
.menu {
......@@ -23,7 +44,10 @@ main {
margin-top: 6px;
float: right;
@media(min-width:517px) and (max-width:768px) {
@media(max-width: 568px) {
}
@media(min-width:568px) and (max-width:768px) {
margin-top: -45px;
}
}
......@@ -64,7 +88,6 @@ main {
}
.navbar-header {
img {
float: left;
......
.article {
@media(max-width: 568px) {
margin-bottom: 50px;
.left {
float: none !important;
}
.right {
float: none !important;
}
}
width: 100%;
......@@ -13,6 +24,9 @@
}
img {
@media(max-width:568px) {
display: none;
}
display: flex;
margin: auto;
max-width: 30%;
......@@ -37,7 +51,11 @@ img {
}
.article-body {
@media(min-width:517px) and (max-width:907px) {
@media(max-width: 568px) {
float: none;
width: 100%;
}
@media(min-width:568px) and (max-width:907px) {
height: initial;
.intro_pic {
......@@ -47,7 +65,7 @@ img {
width: 50%;
height: 30%;
padding: 10px 10px 10px 10px;
padding: 10px;
border-radius: 5px;
.left {
......@@ -73,8 +91,12 @@ img {
}
.readmore {
@media(max-width: 568px) {
padding-top: 15px;
}
@media(min-width:517px) and (max-width:907px) {
@media(min-width:568px) and (max-width:907px) {
margin-top: 22px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment