How to make responsive sidebar
1
Hello guys i have page and im trying to make responsive sidebar.. but without succeed :/
So here is my css file
body {
font-family: 'Fjalla One', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
padding-bottom: 50rem;
}
.news-box {
background-color: lightgrey;
width: 70%;
float: left;
padding: 15px;
margin: 30px;
}
.news-title {padding-bottom: 5px;}
.sidebar {
position: relative;
width: 24%;
float: right;
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
background-color: lightgrey;
}
Here is a html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="IplexMC,Survur,Mainkraft,Minecraft Store,iplexmc,iplex,shadowhex iplex review">
<meta name="author" content="Lubomir Stankov">
<title> Shte se smenq ot admin panela </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div id="particles-js"></div>
<div class="content-box">
<div class="news-box">
<h3 class="news-title">News</h3>
<div class="card mt-1">
<div class="card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
<div class="card mt-1">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="sidebar">
<div class="side mt-2">
Sidebar
<div class="card mt-2">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="side mt-2">
Sidebar
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
So when i resize a page the sidebar goes into the news content.. I trying many ways but again without succeed.. I don't know what i do wrongh i hope you may help me! Thanks in advice.
html css
asked Nov 11 at 18:22
norespectfr
103
add a comment |
1
Hello guys i have page and im trying to make responsive sidebar.. but without succeed :/
So here is my css file
body {
font-family: 'Fjalla One', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
padding-bottom: 50rem;
}
.news-box {
background-color: lightgrey;
width: 70%;
float: left;
padding: 15px;
margin: 30px;
}
.news-title {padding-bottom: 5px;}
.sidebar {
position: relative;
width: 24%;
float: right;
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
background-color: lightgrey;
}
Here is a html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="IplexMC,Survur,Mainkraft,Minecraft Store,iplexmc,iplex,shadowhex iplex review">
<meta name="author" content="Lubomir Stankov">
<title> Shte se smenq ot admin panela </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div id="particles-js"></div>
<div class="content-box">
<div class="news-box">
<h3 class="news-title">News</h3>
<div class="card mt-1">
<div class="card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
<div class="card mt-1">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="sidebar">
<div class="side mt-2">
Sidebar
<div class="card mt-2">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="side mt-2">
Sidebar
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
So when i resize a page the sidebar goes into the news content.. I trying many ways but again without succeed.. I don't know what i do wrongh i hope you may help me! Thanks in advice.
html css
asked Nov 11 at 18:22
norespectfr
103
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Yes i want that..
– norespectfr
Nov 11 at 18:43
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48
add a comment |
1
1
1
Hello guys i have page and im trying to make responsive sidebar.. but without succeed :/
So here is my css file
body {
font-family: 'Fjalla One', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
padding-bottom: 50rem;
}
.news-box {
background-color: lightgrey;
width: 70%;
float: left;
padding: 15px;
margin: 30px;
}
.news-title {padding-bottom: 5px;}
.sidebar {
position: relative;
width: 24%;
float: right;
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
background-color: lightgrey;
}
Here is a html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="IplexMC,Survur,Mainkraft,Minecraft Store,iplexmc,iplex,shadowhex iplex review">
<meta name="author" content="Lubomir Stankov">
<title> Shte se smenq ot admin panela </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div id="particles-js"></div>
<div class="content-box">
<div class="news-box">
<h3 class="news-title">News</h3>
<div class="card mt-1">
<div class="card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
<div class="card mt-1">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="sidebar">
<div class="side mt-2">
Sidebar
<div class="card mt-2">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="side mt-2">
Sidebar
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
So when i resize a page the sidebar goes into the news content.. I trying many ways but again without succeed.. I don't know what i do wrongh i hope you may help me! Thanks in advice.
html css
asked Nov 11 at 18:22
norespectfr
103
Hello guys i have page and im trying to make responsive sidebar.. but without succeed :/
So here is my css file
body {
font-family: 'Fjalla One', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
padding-bottom: 50rem;
}
.news-box {
background-color: lightgrey;
width: 70%;
float: left;
padding: 15px;
margin: 30px;
}
.news-title {padding-bottom: 5px;}
.sidebar {
position: relative;
width: 24%;
float: right;
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
background-color: lightgrey;
}
Here is a html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="IplexMC,Survur,Mainkraft,Minecraft Store,iplexmc,iplex,shadowhex iplex review">
<meta name="author" content="Lubomir Stankov">
<title> Shte se smenq ot admin panela </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div id="particles-js"></div>
<div class="content-box">
<div class="news-box">
<h3 class="news-title">News</h3>
<div class="card mt-1">
<div class="card-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
<div class="card mt-1">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="sidebar">
<div class="side mt-2">
Sidebar
<div class="card mt-2">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="side mt-2">
Sidebar
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
So when i resize a page the sidebar goes into the news content.. I trying many ways but again without succeed.. I don't know what i do wrongh i hope you may help me! Thanks in advice.
html css
html css
asked Nov 11 at 18:22
norespectfr
103
asked Nov 11 at 18:22
norespectfr
103
asked Nov 11 at 18:22
norespectfr
103
asked Nov 11 at 18:22
norespectfr
103
asked Nov 11 at 18:22
norespectfr
103
103
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Yes i want that..
– norespectfr
Nov 11 at 18:43
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48
add a comment |
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Yes i want that..
– norespectfr
Nov 11 at 18:43
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Yes i want that..
– norespectfr
Nov 11 at 18:43
Yes i want that..
– norespectfr
Nov 11 at 18:43
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48
add a comment |
1 Answer
1
active
oldest
votes
0
First of all, I dont't recommend to use floats anymore if you want to make it responsive, I used flexbox to do that, if you want to fully understand what I did read this.
You need to set a display: flex; for the parent div, and other flex attributes for positioning, and instead of padding-bottom use margin-bottom
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
margin-bottom: 50rem; /*Changed*/
display: flex; /*Added*/
flex-direction: column; /*Added*/
justify-content: center; /*Added*/
}
Then delete the position: relative and float for the sidebar, and change the width
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
Also update the news box, delete the float and change the width
.news-box {
background-color: lightgrey;
width: 90%; /*Changed*/
padding: 15px;
margin: 30px;
}
That's gonna be ok for mobile, we are using mobile first here, what you need to do for desktop is set a media query
@media only screen and (min-width: 768px){
.sidebar {
width: 24%;
}
.news-box {
width: 70%;
}
.content-box {
flex-direction: row;
}
}
And that should work, read the information and it's gonna be more easy to understand, here you have the codepen, let me know if that helps you!
answered Nov 11 at 19:05
MartinBA
7161213
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251808%2fhow-to-make-responsive-sidebar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
First of all, I dont't recommend to use floats anymore if you want to make it responsive, I used flexbox to do that, if you want to fully understand what I did read this.
You need to set a display: flex; for the parent div, and other flex attributes for positioning, and instead of padding-bottom use margin-bottom
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
margin-bottom: 50rem; /*Changed*/
display: flex; /*Added*/
flex-direction: column; /*Added*/
justify-content: center; /*Added*/
}
Then delete the position: relative and float for the sidebar, and change the width
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
Also update the news box, delete the float and change the width
.news-box {
background-color: lightgrey;
width: 90%; /*Changed*/
padding: 15px;
margin: 30px;
}
That's gonna be ok for mobile, we are using mobile first here, what you need to do for desktop is set a media query
@media only screen and (min-width: 768px){
.sidebar {
width: 24%;
}
.news-box {
width: 70%;
}
.content-box {
flex-direction: row;
}
}
And that should work, read the information and it's gonna be more easy to understand, here you have the codepen, let me know if that helps you!
answered Nov 11 at 19:05
MartinBA
7161213
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
add a comment |
0
First of all, I dont't recommend to use floats anymore if you want to make it responsive, I used flexbox to do that, if you want to fully understand what I did read this.
You need to set a display: flex; for the parent div, and other flex attributes for positioning, and instead of padding-bottom use margin-bottom
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
margin-bottom: 50rem; /*Changed*/
display: flex; /*Added*/
flex-direction: column; /*Added*/
justify-content: center; /*Added*/
}
Then delete the position: relative and float for the sidebar, and change the width
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
Also update the news box, delete the float and change the width
.news-box {
background-color: lightgrey;
width: 90%; /*Changed*/
padding: 15px;
margin: 30px;
}
That's gonna be ok for mobile, we are using mobile first here, what you need to do for desktop is set a media query
@media only screen and (min-width: 768px){
.sidebar {
width: 24%;
}
.news-box {
width: 70%;
}
.content-box {
flex-direction: row;
}
}
And that should work, read the information and it's gonna be more easy to understand, here you have the codepen, let me know if that helps you!
answered Nov 11 at 19:05
MartinBA
7161213
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
add a comment |
0
0
0
First of all, I dont't recommend to use floats anymore if you want to make it responsive, I used flexbox to do that, if you want to fully understand what I did read this.
You need to set a display: flex; for the parent div, and other flex attributes for positioning, and instead of padding-bottom use margin-bottom
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
margin-bottom: 50rem; /*Changed*/
display: flex; /*Added*/
flex-direction: column; /*Added*/
justify-content: center; /*Added*/
}
Then delete the position: relative and float for the sidebar, and change the width
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
Also update the news box, delete the float and change the width
.news-box {
background-color: lightgrey;
width: 90%; /*Changed*/
padding: 15px;
margin: 30px;
}
That's gonna be ok for mobile, we are using mobile first here, what you need to do for desktop is set a media query
@media only screen and (min-width: 768px){
.sidebar {
width: 24%;
}
.news-box {
width: 70%;
}
.content-box {
flex-direction: row;
}
}
And that should work, read the information and it's gonna be more easy to understand, here you have the codepen, let me know if that helps you!
answered Nov 11 at 19:05
MartinBA
7161213
First of all, I dont't recommend to use floats anymore if you want to make it responsive, I used flexbox to do that, if you want to fully understand what I did read this.
You need to set a display: flex; for the parent div, and other flex attributes for positioning, and instead of padding-bottom use margin-bottom
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
max-width: 70rem;
margin: 0 auto;
margin-top: 20rem;
background: white;
margin-bottom: 50rem; /*Changed*/
display: flex; /*Added*/
flex-direction: column; /*Added*/
justify-content: center; /*Added*/
}
Then delete the position: relative and float for the sidebar, and change the width
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
Also update the news box, delete the float and change the width
.news-box {
background-color: lightgrey;
width: 90%; /*Changed*/
padding: 15px;
margin: 30px;
}
That's gonna be ok for mobile, we are using mobile first here, what you need to do for desktop is set a media query
@media only screen and (min-width: 768px){
.sidebar {
width: 24%;
}
.news-box {
width: 70%;
}
.content-box {
flex-direction: row;
}
}
And that should work, read the information and it's gonna be more easy to understand, here you have the codepen, let me know if that helps you!
answered Nov 11 at 19:05
MartinBA
7161213
answered Nov 11 at 19:05
MartinBA
7161213
answered Nov 11 at 19:05
MartinBA
7161213
answered Nov 11 at 19:05
MartinBA
7161213
7161213
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
add a comment |
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Yeah i understand it! Thanks, but how to align news content and sidebar to be in same level. i mean it have little space at the bottom of that!
– norespectfr
Nov 11 at 19:07
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Oh i fixed it.. it was from bootstrap 4 framework (mt-2)
– norespectfr
Nov 11 at 19:09
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
Yep! that was the problem!
– MartinBA
Nov 11 at 19:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251808%2fhow-to-make-responsive-sidebar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Yes exactly.. But when i resize page sidebar must goes down!
– norespectfr
Nov 11 at 18:35
Ok, check it again, confirm if thats what you want and I will explain it to you, codepen.io/federicomartin/pen/RqGxmE?editors=1100
– MartinBA
Nov 11 at 18:41
Yes i want that..
– norespectfr
Nov 11 at 18:43
@MartinBA can you explain me now.. and one more think i want to help is now how to align it little at the top to be aligned with the news box?
– norespectfr
Nov 11 at 18:48