I'm trying to hide the navigation bar and display another thing in it place when the resolution is low and for small screens (mobile)
I did manage to hide the navigation bar but the the other thing won't display.
#media only screen and (max-device-width: 500px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
#media only screen and (max-width: 1279px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
.small-menu {
display: none;
}
.regular-menu {
display: block;
}
Write your css this seqvence
write to your hole page css
write to your css max-width 1279
write to your css max-device-width 500
.small-menu {
display: none;
}
.regular-menu {
display: block;
}
#media only screen and (max-width: 1279px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
#media only screen and (max-device-width: 500px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
<div class="samll-menu">This is small menu</div>
<div class="regular-menu">This is regular-menu</div>
Related
i have the following code / CSS what i am trying to do is only display one type of menu depending on the screensize / device (Mobile, tablet, desktop) however my mobile and my tablet are always shown together.
Can anyone see what i might be missing?
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (min-width:320px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:480px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) {
.tablet-nav {
display: block;
}
}
#media (min-width:801px) {
.tablet-nav {
display: block;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1281px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>
Use max-width instead.
Here's what your code is saying, in plain English:
Hide all the menus
However, if it's bigger than 320px, show the mobile menu button
And if it's bigger than 480px, show the tablet menu button
And the ones after that basically just get in the way of things, so you can remove those.
You should use some different media queries instead, like the ones in the code below, which use max-width.
I have also changed them to be more realistic for those devices.
/* desktops */
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (max-width: 1000px) {
/* tablets */
.mobile-nav {
display: none;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: block;
}
}
#media (max-width: 600px) {
/* mobiles */
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>
As i write in comment use max-width for perfom query like:
#media (max-width:599px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) and (max-width:1024px) {
.desktop-nav {
display: none;
}
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>
You have missed to overwrite .mobile-nav class on #media 600px and 801px.
There, you have rewritten .tablet-nav but have not rewritten .mobile-nav so it is set to the last class of #media 480px which is set as display: block.
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
#media (min-width:320px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:480px) {
.mobile-nav {
display: block;
}
.desktop-nav {
display: none;
}
.tablet-nav {
display: none;
}
}
#media (min-width:600px) {
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:801px) {
.tablet-nav {
display: block;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1025px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
#media (min-width:1281px) {
.desktop-nav {
display: block;
}
.tablet-nav {
display: none;
}
.mobile-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>
use min-width and max-width in media queries.
#media only screen and (min-width: 601px) and (max-width: 1000px) {
.desktop-nav, .mobile-nav {
display: none;
}
}
#media only screen and (min-width: 1001px) {
.tablet-nav, .mobile-nav {
display: none;
}
}
#media only screen and (max-width: 600px) {
.desktop-nav, .tablet-nav {
display: none;
}
}
<div class="desktop-nav">
Desktop
</div>
<div class="tablet-nav">
Tablet
</div>
<div class="mobile-nav">
Mobile
</div>
add .mobile-nav { display: none; } in #media (min-width:600px). check link here to see result.
But that's a lot of media queries. you can optimize that. and keep in mind when you put something in min-width 320. it will be excuted for all widths > 320. so if you don't want it to work like in 768. you should add class there and change it.
I have dropdown button which I want to hide when on mobile layout. On mobile layout there should be 1 main button, and on click of this button should trigger display of dropdown button. As of now on mobile overlay the main button is overlapped by dropdown button. How can I achieve this functionality?
Here is my scss code
#media (min-width: 700px) {
.bot {
display: none;
}
}
#if (max-width: 700px) {
.tools {
display: block;
}
} #else {
.tools {
display: none;
}
}
.toolss {
background-color: $-white;
height: 100%;
left: 0;
overflow-y: auto;
padding-bottom: 65px;
.tools {
background: white;
border: 0;
border-bottom: 1px dark-gray-shade-light;
border-radius: none;
border-top: 1px dark-gray-shade-light;
height: auto;
}
}
.tools {
background-color: white;
display: block;
#media (max-width: 700px) {
display: block;
}
}}
Here is my html code
<ng-container>
<button class="bot" (click)="fill()">Data
</button>
<div class="toolss">
<div class="tools">
<dropdown-overlay [labelDrop]="i18nService
></dropdown-overlay>
</div>
</div>
DEMO
SASS
.hide-dropdown{
display: block;
}
#media(max-width: 700px) {
.hide-dropdown{
display: none;
}
}
.hide-button {
display: none
}
#media(max-width: 700px) {
.hide-button {
display: block;
}
}
HTML
<ng-container>
<button class="bot hide-button" (click)="fill()">Data
</button>
<div class="toolss" [ngClass]="{'hide-dropdown': !isClicked}">
<div class="tools">
<dropdown-overlay [labelDrop]="i18nService
></dropdown-overlay>
</div>
</div>
</ng-container>
TS
isClicked: boolean = false;
fill() {
this.isClicked = true;
}
I use mobile first principle for my sass (css), but I found quite a pattern which is quite disturbing.
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#media only screen and (min-width: 640px) {
margin-right: 0;
}
}
#media only screen and (min-width: 640px) {
flex: 1;
}
}
Imagine there will be more screen size, there will be
#media only screen and (min-width: 1200px)
#media only screen and (min-width: 1200px)
#media only screen and (min-width: 1200px)
everywhere, how to solve this?
You can also set a map with all you breakpoints (you can call them as you want) and use it in a mixin.
// your variables.scss file
$breakpoints:(
sm: 640px,
md: 1200px,
lg: 1400px,
xl: 1900px
);
// your mixins.scss file
#mixin min-width($breakpoint){
#media only screen and (min-width:#{map-get($breakpoints, $breakpoint)}) {
#content;
}
}
// your module.scss file
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#include min-width(sm){
margin-right: 0;
}
}
#include min-width(sm){
flex: 1;
}
}
you can use #mixin to manage it
https://jsfiddle.net/wyd6pxnh/2/
#mixin mediaQuery($point) {
$mq-device1: "(min-width: 640px)";
$mq-device2: "(min-width: 1200px)";
#if $point=="device1" {
#media #{$mq-device1} {
#content;
}
}
#else if $point=="device2" {
#media #{$mq-device2} {
#content;
}
}
}
.innerWrap {
display: flex;
align-items: center;
&:first-child {
margin-right: 20px;
#include mediaQuery('device1') {
margin-right: 0;
}
}
#include mediaQuery('device1') {
flex: 1;
}
}
Output
.innerWrap {
display: flex;
align-items: center;
}
.innerWrap:first-child {
margin-right: 20px;
}
#media (min-width: 640px) {
.innerWrap:first-child {
margin-right: 0;
}
}
#media (min-width: 640px) {
.innerWrap {
flex: 1;
}
}
I want div1 to appear only when the window width is less than 800px, and I want div2 to appear only when the window width is greater than 800px. My solution is to use the following CSS which works. However, is there a way to do this using only one #media command? It seems clumsy to have to write two conditions, one for a max-width, and one for a min-width.
#media screen and (max-width: 800px) {
#div1 {
display: block;
}
#div2 {
display: none;
}
}
#media screen and (min-width: 800px) {
#div1 {
display: none;
}
#div2 {
display: block;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
Take one of the set out of media queries.
#div1 {
display: none;
}
#div2 {
display: block;
}
#media screen and (max-width: 800px) {
#div1 {
display: block;
}
#div2 {
display: none;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
Or
#div1 {
display: block;
}
#div2 {
display: none;
}
#media screen and (min-width: 800px) {
#div1 {
display: none;
}
#div2 {
display: block;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
There is a way to combine media queries try:
#media only screen and (max-width: 600px) and (min-width: 400px) {
The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
Or if you only want to target screen sizes that are 800px or less use:
#media screen and (max-width: 800px) {
replace #media screen and (max-width: 800px) { #div1 {
display: block;
}
#div2 {
display: none;
} }
with #div1 {
display: block;
}
#div2 {
display: none;
}
I am trying to make users comments responsive on my website, so that at full width three show,at tablet size two and mobile one. I have attached the link to the website so you can get more of an idea of what i mean: http://www.bfi-film-festival.com/movie.php?id=269
.cmt {
float: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 15px 0;
}
.cmt_inr {
width: 100% !important;
float: left;
margin: 2%;
min-height: 100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-box-flex: 1;
flex: 1;
position: relative;
padding-bottom: 80px;
}
#media only screen and (max-width: 480px)
.cmt_inr {
width: 100%;
}
#media only screen and (max-width: 768px)
.cmt_inr {
width: 50%;
}
The # media screens i am using don't seem to work and i have no idea why.
the "{}" are missing for the #media-tag
#media screen and (max-width: 768px) "{"
"}"
Try this to see a result:
#media screen and (max-width: 768px) {
.cmt_inr {
background-color: red;
width: 50%;
}
}
#media screen and (max-width: 480px) {
.cmt_inr {
background-color: blue;
width: 20%;
}
}
The "!important" would override the witdth so try to avoid it or set the !important for the widths in the #media-tag too.