how to make the footer down below and vertical?
I want it for the mobile version to make the footer down below.
I tried many solutions but it didn't work very well.
the output
as you see it become like this, I don't know if it's from the footer or the content itself?
/* mobile styles */
.footer {
height: auto;
border: 1px solid red;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .footer-section {
height: auto;
}
/* desktop styles */
.footer {
height: 200px;
width: 100%;
}
.footer .footer-bottom {
height: 20px;
width: 100%;
text-align: center;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer .footer-content {
height: 180px;
display: flex;
}
.footer .footer-content .footer-section {
flex: 1;
}
Try this:
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
If you are using bootstrap simply use col classes
Related
I'm trying to create a menu inside CSS, and this is how my HTML skeleton looks like:
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
This is the part of CSS I'm focusing on:
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Basically, what I'm trying to achieve is setting the background color of each element to red, on element hover (<li>). The problem is, the background color seems not to fill the whole height of its parent (the menu-container), although this is what I actually want to do.
I tried setting the menu-item padding to 100%, but it just fills the whole screen. It isn't relative to menu-container's height.
To be more precise, this is how it looks like:
But I want the red background's height all over the div, like this:
What can I do, in order to achieve that? Thank you.
So, Instead of giving a fixed height to parent div. I adjust this using by adding padding from the top and bottom to each lielement.
Made some changes on CSS Have a look the snippet below:
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
.menu-list {
margin: 0 auto;
}
.menu-item {
display: inline-block;
padding: 1.25rem 0;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
<body>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-item">Item1</li>
<li class="menu-item">Item2</li>
<li class="menu-item">Item3</li>
</ul>
</div>
</body>
Just add height:100% to both menu-list and menu-item. In case you want the item to be centered instead of sticking to the top you can use a display: flex and align-items: center, justify-content:center
.menu-container {
background-color: blue;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content:center;
}
.menu-list {
height: 100%;
background-color:yellow;
display:flex;
align-items: center;
justify-content:center;
}
.menu-item {
display: flex;
align-items:center;
justify-content:center;
height:100%;
background-color:green;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
You can make your CSS like this,
Giving the height to 100% will take 100% height of the parent element.
I am trying to fix your css, please check my solution -
.menu-container {
background-color: #e5e5e5;
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* at first you inline the whole ul */
.menu-list {
margin: 0 auto;
display: flex;
list-style: none;
}
/* then center the options & set full height */
.menu-item {
display: flex;
align-items: center;
height: 4rem;
cursor: pointer;
padding: 0 1rem;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
Solution 2
.menu-container {
background-color: #e5e5e5;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
}
/* set full height */
.menu-list {
margin: 0 auto;
height: 100%;
}
/* set full height also */
.menu-item {
display: inline-block;
padding: 1.25rem 0;
height: 100%;
}
.menu-item:not(:last-child) {
margin-right: 5vw;
}
.menu-item:hover {
background-color: red;
}
i am trying to use media queries to have a style for screens larger than 768px and another one for smaller than 768px
when i resize the window the changes are happening but when i'm opening the website with phone or with the phone view in the Chrome inspector it doesnt work as I expect..
thanks !
#media (max-width: 768px) {
body {
background-color: lightblue;
}
}
#media (min-width: 768px) {
body {
display: flex;
justify-content: center;
}
#cont {
background-color: aqua;
width: 80vw;
}
#header {
height: 30vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#tophead {
background-color: blueviolet;
height: 5vh;
display: flex;
justify-content: space-between;
align-items: center;
}
#lefttophead {
height: 80%;
width: 40%;
background-color: yellow;
}
#righttophead {
height: 80%;
width: 20%;
background-color: orange;
}
#lowhead {
height: 10vh;
background-color: gold;
display: flex;
align-items: center;
}
#navbar {
height: 80%;
width: 100%;
background-color: hotpink;
display: flex;
justify-content: space-between;
align-items: center;
}
#onglets {
width: 70%;
height: 80%;
background-color: cadetblue;
}
#searchbar {
width: 20%;
height: 80%;
background-color: skyblue;
}
}
I'm having trouble making my layout responsive
basically I only have one header and when I'm at lower resolutions the screen is completely buggy
the background which is 100vh and 100vw does not work
image:
in desktop resolution:
code:
function App() {
return (
<div className="Wrapper">
<div className="Header">
<div className="navtop Container">
<div className="LogoHeader">
<a>
<img className="img" src={Logo} />
</a>
</div>
<div className="SearchWrapper">
<form className="form">
<input className="input" />
</form>
</div>
<nav className="NavWrapper">a</nav>
</div>
</div>
</div>
);
}
css:
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
#root {
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
.Wrapper{
height: 100% !important;
background: red;
display: flex;
flex-flow: row wrap;
}
.Header{
width: 100%;
height: 140px;
color: rgb(255, 255, 255);
background: rgb(113, 89, 193);
transition: all 0.2s ease 0s;
}
.navtop{
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background:yellow;
}
.Container{
max-width: 1140px;
padding: 0px 30px;
margin: 0px auto;
}
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
min-width: 10em;
}
.img {
width: 150px;
}
.SearchWrapper {
background: yellow;
height: 100%;
display: flex;
align-items: center;
}
.input {
min-width: 200px;
}
.input:focus {
min-width: 300px;
}
.NavWrapper {
background: black;
height: 100%;
}
i really tried every possible solution i know i could change that with media queries
but i know i did something wrong in my css so i'm having this
I'm not exactly sure what you're aiming at, but there are at least 3 elements that are causing your header to not be able to shrink down fully to a mobile width below 440px.
Adjusting these 3 elements will get you going in the right direction, like so:
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
/*min-width: 10em;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 10em; /*ADD THIS*/
}
.img {
/*width: 150px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 150px; /*ADD THIS*/
height: auto; /*ADD THIS */
}
.input {
/*min-width: 200px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 200px; /*ADD THIS*/
min-width: 50px; /*ADD THIS*/
}
Or you could adjust these elements in a media query, like so:
#media (max-width: 480px) {
.LogoHeader {
min-width: unset;
width: 100%;
max-width: 10em;
}
.image {
width: 100%;
max-width: 150px;
height: auto;
}
.input {
width: 100%;
max-width: 200px;
min-width: 50px;
}
}
Of course, you may want to adjust the values as needed and make some other modifications, but this should at lease allow the header to shrink down to mobile width.
The point here is that .img had a fixed with 150px and the input had a min-width of 200px, and the .LogoHeader had a min-width of 10em so those fixed widths and min-widths along with the padding of the .Container and .LogoHeader was not allowing your entire Header to shrink below 440px.
Centering a flex item is easy. However I like to shift it upwards a bit so that the the relation between the upper and lower space is e. g. 1/2. Easy too when using fillers. But is there a way to do this whithout fillers?
HTML:
<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>
CSS:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#filler-top {
width: 100%;
flex: 1;
}
#filler-bottom {
width: 100%;
flex: 2;
}
https://jsfiddle.net/Sempervivum/b2wotc8e/3/
Applying margin-top and margin-bottom doesn't work as a percentage is relative to the width.
instead of adding 2 elements to the markup, you can use :before and :after pseudo-elements:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
body:before {
content: "";
width: 100%;
flex: 1;
}
body:after {
content: "";
width: 100%;
flex: 2;
}
<div id="the-item"></div>
Another option is to simply use a mixture of position:relative, top and transform:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
position: relative;
top: 33.333%;
transform: translateY(-33.333%);
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
<div id="the-item"></div>
I'm trying to make a 2 1 2 flexbox layout as seen in my previous question; Flexbox/Float - 2 1 2 Layout.
The layout in the answer works, but it's making the children become flex as well and I'm trying to fix this.
I'd like the text to be underneath the pictures instead of next to it but can't seem to make this work.
.mustReadImage img {
width: 334px;
height: 222px;
display: block;
}/*Image*/
.mustReadN {
flex: 0 0 50%;
display: flex;
width: 334px;
}/*li*/
.mustReadN:nth-child(3) {
flex: 0 0 100%;
}/*Big li*/
.mustReadN:nth-child(3) img {
width: 670px;
height: 680px;
}/*Big Li Image*/
.mustReadGroup {
display: flex;
height: 670px;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 74%;
margin-left: auto;
margin-right: auto;
}/*Ul*/
The li's have children as well.
edit 1; It has to become something like this.
This fiddle from #NenadVracar had the answer!
body,
html,
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
ul {
display: flex;
height: 100vh;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
}
li {
flex: 0 0 50%;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
li:nth-child(3) {
flex: 0 0 100%;
}
p {
margin: 0;
}
flex-direction: column; fixed it for me.