I'm trying to set width of a Div to 95% in #media but it gets canceled by the browser.
It works fine with other divs.
#media screen and (max-width: 700px) {
.proj {
flex-direction: column;
align-items: center;
border: 1px solid white;
width: 300%
}
.innp {
width: 50%;
}
}
.proj {
display: flex;
justify-content: space-between;
width: 100%
}
.innp {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
border: 1px solid white;
overflow: hidden;
}
Here is what the browser does:
https://i.stack.imgur.com/35aJG.png
Put #media at last. In CSS, the one appear later in the code override earlier rules
.proj {
display: flex;
justify-content: space-between;
width: 100%
}
.innp {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
border: 1px solid white;
overflow: hidden;
}
#media screen and (max-width: 700px) {
.proj {
flex-direction: column;
align-items: center;
border: 1px solid white;
width: 300%
}
.innp {
width: 50%;
}
}
More information: What is the order of precedence for CSS?
Related
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
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
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;
}
}
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
background-img is a div which wraps all of the other classes.
I have tried using the ::before method but cannot get it to work either.
If there are any other improvements I can make please let me know.
thanks in advance
.background-img {
height: 100vh;
width: 100vw;
opacity: 0.1;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
background: url(./assets/breakfast.png) no-repeat center center;
background-size: cover;
}
.header-img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.logo1 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.logo2 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.paragraph-img-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 5rem;
}
.main-paragraph {
font-size: 2rem;
}
.loading-container {
display: flex;
justify-content: center;
}
You'll need to do that by adding the background as pseudo element
.background-img {
height: 100vh;
width: 100vw;
}
.background-img:after{
content: '';
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: url(https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png) no-repeat center center;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
background-size: cover;
}
.header-img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.logo1 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.logo2 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.paragraph-img-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 5rem;
}
.main-paragraph {
font-size: 2rem;
}
.loading-container {
display: flex;
justify-content: center;
}
<div class="background-img">
<div class="header-img-container">
<img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
</div>
<div class="logo1">
<img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
</div>
</div>
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>