I am trying to apply media queries to my website, however nothing is changing.
I have tried changing the position of my media query in the CSS flow, but no joy.
here is the specific part of the code:
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
I would like to replace the desktop header with a simplified mobile header that just displays images rather than the text. Currently, nothing is changing at all. Everything seems sound in the html, so I can only think I am leaving something out of the CSS?
Thank you for your help in advance!
I found nothing wrong with your code. It's absolutely fine! May be there are other conflicting code that bars your code from displaying as you intended.
Here I added some HTML and it's working fine with your code.
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
<div class="desktop-header">
<h1>Desktop Header</h1>
</div>
<div class="mobile-header">
<h1>Mobile Header</h1>
</div>
use these media queries and follow at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
Related
First off I am very new to CSS and following an online course.
I am trying to create a navigation bar that changes from row to column when going into mobile. I am using flexbox and #media queries for that however, it seems like my code does not make any change to the navigation direction when going to mobile. Please help! ]
.container {
display: flex;
color: white;
justify-content: flex-end;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: row;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
Can't say exactly what problems you are having without seeing some example HTML to work with but at first glance it seems you should be using flex-direction:column for your mobile view.
Note well: What is in the media query is your mobile styles in this case. You can tell because you have specified max-width which means that it will apply to all screen sizes below the width provided (600px).
See the below as an example which incorporates your provided CSS with some basic HTML I made. (Resize the browser window to test).
.container {
display: flex;
color: white;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
<div class="container">
<div class="box">Entry 1</div>
<div class="box">Entry 2</div>
<div class="box">Entry 3</div>
<div class="box">Entry 4</div>
</div>
You can also read more about flex-direction at the MDN Web Docs
I am currently creating some pages as part of the Free Code Camp CSS challenges.
For some reason my tags are not properly centering once I collapse the grid upon the #media activation. They keep slightly drifting to the right side.
The link for the complete pen is here:
https://codepen.io/alioshr/pen/KKPBPMr
I have already tried using inline-block display, justify-self to center, etc.
<html>
<header id="header">
<figure>
<img id="header-img"src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
</figure>
<div>
<h1>Doce Meliponicultura</h1>
<p>Reconnect with Mother-nature</p>
</div>
<nav id="nav-bar">
<ul>
<li>Top Features</li>
<li>Products</li>
<li>Social</li>
</ul>
</nav>
</header>
</html>
<style>
a {text-decoration: none; display: inline-block;}
#header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
background: gold;
align-items: center;
justify-self: center;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 99;
}
#media (max-width: 600px) {
#header {grid-template-areas: "title" "logo" "nav-bar";}
#header > figure {grid-area: logo;}
#header > div {grid-area: title;}
#header > nav {grid-area: nav-bar;}
}
#header > figure {
justify-self: start;
align-self: center;
display: relative;
max-height: 140px;
}
#media (max-width: 600px) {
#header > figure {
justify-self: center;
}
}
#header > nav {
justify-self: end;
}
#media (max-width: 600px) {
#header > nav {
justify-self: center;
}
}
</style>
You can add below CSS in your #media (max-width: 600px)
#header > nav > ul{
padding: 0px;
}
It will fix your issue.
I'll add my answer as well, to give a bit more info about Flexbox set up. Basically I removed all the CSS Grid syntax in favor of Flexbox. I'm not sure what exactly you're going for, but this will give you an idea of how to get it working at a minimum.
#header {
display: flex;
background: gold;
align-items: center;
justify-content: space-around;
width: 100%;
}
#media (max-width: 600px) {
#header {
flex-direction: column;
}
}
#header>figure {
justify-self: flex-start;
align-self: center;
max-height: 140px;
}
#media (max-width: 600px) {
#header>figure {
justify-self: center;
}
}
#header>nav {
justify-self: flex-end;
}
#media (max-width: 600px) {
#header>nav {
justify-self: center;
}
}
Here is my working fiddle (the codepen link you supplied never loaded for me).
Here is a really great resource on learning what all the Flexbox rules do, etc
A Complete Guide to Flexbox
I am using a theme to which I have added an image header (with our logo). I have called this image "https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg". the website address is https://londonim.co.il - it is in Hebrew (regardless).
The div in which "logo.jpg" is situated is inheriting some display from the there (i think "block"), and I would very much like it to be centered.
In order to try and center it i have used margins of 25% but it would not keep its central alignment when displayed in bigger screens (unless in full screen mode).
when i temper with the wrapper's display property it generally disappears or loses the alignment altogether. Any thoughts please?
theme header:
<div class="cutewp-container" id="cutewp-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
<div class="cutewp-head-content clearfix" id="cutewp-head-content">
<div class="cutewp-outer-wrapper">
<div class="cutewp-header-inside clearfix">
<div id="cutewp-logo">
<div class="site-branding">
<a href="https://www.londonim.co.il/" rel="home" class="cutewp-logo-img-link">
<img src="https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg" alt="" class="cutewp-logo-img">
</a>
</div>
my tweaks:
/* homepage tweaks */
.cutewp-main-wrapper {
position:relative!important;
margin-left:12.5%;
margin-right:12.5%;
}
#cutewp-logo {
margin-left:25%;
margin-right:25%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#cutewp-primary-navigation {
text-align: center;
text-align: -webkit-center;
}
#cutewp-header {
text-align: center;
text-align: -webkit-center;
}
.menu-main-container {
margin-left: 25%;
}
Thanks in advance for the help!
The best solution is to:
#cutewp-logo {
margin-left:25%;//delete this
margin-right:25%;//delete this
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;//delete this
width: 100vw;//add this
}
The element isn't centering because it doesn't occupy the full width of the screen therefore has no reference on to be centered to
You need to clear out a few of those margin-left and margin-right
CHANGE
#cutewp-logo {
margin: 5px 0px 5px 0px;
float: left;
width: 41%;
}
.cutewp-main-wrapper {
position: relative!important;
margin-left: 12.5%;
margin-right: 12.5%;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
margin-left: 25%;
background-color: white;
}
.cutewp-content-wrapper {
margin-left: 25%;
}
}
TO
#cutewp-logo {
margin: auto;
}
.cutewp-main-wrapper {
position: relative!important;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
background-color: white;
}
.cutewp-content-wrapper {
margin: auto;
}
}
This will fix the issue on both your desktop and mobile view.
I have the following media query codes:
//First
#media screen and (min-width: 357px) and (max-width: 910px) {
#questionBreadcrumb {
display: block;
text-align: center;
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
}
}
}
//Second
#media screen and (min-width: 911px) {
#questionBreadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
.breadcrumbs {
> div {
display: flex;
align-items: center;
}
}
}
}
Somehow when I scale my screen up to 800px the first media query is applied correctly. But when I get to 804px it started using the second media query.
Can someone tell me or point to me what I'm doing wrong? It might be something so small but I just can't figure it out.
try this:
#questionBreadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
.breadcrumbs {
> div {
display: flex;
align-items: center;
}
}
}
#media screen and (max-width: 910px) {
#questionBreadcrumb {
display: block;
text-align: center;
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
}
}
}
I think u wrong in write the css code, so the media queries didn't work. I edit this for recommend
From this :
.breadcrumbs {
> div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
Shoyld be :b
.breadcrumbs div {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
}
i have this HTML
<div class="flex-container">
<div class="flex-full">1</div>
</div>
<div class="flex-container">
<div class="flex">2</div>
<div class="flex">3</div>
<div class="flex">4</div>
</div>
Styled by this CSS
*{
margin:0;
padding:0;
}
.flex-container{
width: 90%;
max-width: 960px;
display: flex;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.flex-full{
background-color: red;
flex: 1 0 100%;
}
.flex{
background-color: blue;
flex: 1 0 90px;
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
But the result is not as intended. i will try to give a visual presentation of the problem(upload image wont work):
On screen width 320px and below, i get the following result
111111111111111
222222233333333
444444444444444
What i expected was:
phone screen bigger screen
111111111111111 111111111111111111
222222222222222 222222333333444444
333333333333333
444444444444444
I hope it made sence, please help me out :)
JSFiddle
Are you maybe looking for flex-direction: column;?
on .flex-container.
In Flex, you may use justify-content and align-content for horizontal and vertical alignment, respectively.
Also flex-basis takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.
.flex-container {
flex-direction: row;
justify-content: space-between;
align-content: space-between;
}
.flex1, .flex4{
flex-basis: 100%;
}
.flex2, .flex3{
flex-basis: 50%;
}
#media screen and (max-width: 320px){
.flex2, .flex3{
flex-basis: 100%;
}
}
You may also use width: 100% and width: 50% instead if flex-basis.