i have a codepen in which there is a dismissible drawer with top app bar component
which on resizing to 598px width the top app bar width decreases from 64px to 56px
but when using #media query to align it the drawer is not aligning please can you give a solution to this
codepen >>> https://codepen.io/BhavyaSingh2003/pen/NJbGoO
#media all and (max-width: 599px) {
.mdc-drawer--dismissible {
top: 56px;
height: calc(100% - 56px);
}
}
This CSS declaration:
.app-drawer-layout .mdc-drawer--dismissible
has more specificity (weight) than just:
.mdc-drawer--dismissible
So you can either write selector with the same specificity:
#media all and (max-width: 599px) {
.app-drawer-layout .mdc-drawer--dismissible {
top: 56px;
height: calc(100% - 56px);
}
}
...or add !important to your CSS:
#media all and (max-width: 599px) {
.mdc-drawer--dismissible {
top: 56px !important;
height: calc(100% - 56px) !important;
}
}
Related
I have a md-toolbar from Angular material 2 which is fixed on the page
<md-toolbar id="floating-toolbar" color="primary"></md-toolbar>
<md-progress-bar *ngIf="true" class="floating-progress" mode="indeterminate" color="accent"></md-progress-bar
#floating-toolbar {
position: fixed;
z-index: 1001;
}
I want to put a progress bar underneath that fixed tool-bar. What I am finding that AngularMaterial2's md-toolbar height changes based on the screen width. So I have painfully worked out the following by looking at the view port
#media (max-width: 599px){
.floating-progress {
position: fixed;
margin-top: 56px;
z-index: 1002;
}
}
#media (min-width: 600px) and (max-width: 650px){
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
#media (min-width: 651px) and (max-width: 959px){
.floating-progress {
position: fixed;
margin-top: 48px;
z-index: 1002;
}
}
#media (min-width: 960px) {
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
This seems to work ONLY when the height of the page is full screen on my desktop though. As soon as I reduce the height (Simulating a smaller screen or screen in portrait, these rule are no longer valid as the tool bar's height seems to be a variable of the both width AND height.
Is there a way to easily fix this such as simply snapping the progress bar below that fixed position tool bar.
I have found this in the md-toolbar's scss file which may help?
//toolbar.scss
$md-xsmall: 'max-width: 600px';
$md-small: 'max-width: 960px';
$md-toolbar-height-desktop: 64px !default;
$md-toolbar-height-mobile-portrait: 56px !default;
$md-toolbar-height-mobile-landscape: 48px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;
#mixin md-toolbar-height($height) {
md-toolbar {
min-height: $height;
}
md-toolbar-row {
height: $height;
}
}
md-toolbar {
display: flex;
box-sizing: border-box;
width: 100%;
// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;
padding: 0 $md-toolbar-padding;
flex-direction: column;
md-toolbar-row {
display: flex;
box-sizing: border-box;
width: 100%;
// Flexbox Vertical Alignment
flex-direction: row;
align-items: center;
}
}
// Set the default height for the toolbar.
#include md-toolbar-height($md-toolbar-height-desktop);
// Specific height for mobile devices in portrait mode.
#media ($md-xsmall) and (orientation: portrait) {
#include md-toolbar-height($md-toolbar-height-mobile-portrait);
}
// Specific height for mobile devices in landscape mode.
#media ($md-small) and (orientation: landscape) {
#include md-toolbar-height($md-toolbar-height-mobile-landscape);
}
/*toolbar.css*/
md-toolbar,md-toolbar md-toolbar-row {
display:flex;
box-sizing:border-box;
width:100%
}
md-toolbar{
font-size:20px;
font-weight:400;font-family:
Roboto,"Helvetica Neue",sans-serif;
padding:0 16px;
flex-direction:column;
min-height:64px
}
md-toolbar md-toolbar-row{
flex-direction:row;
align-items:center
}
md-toolbar-row{
height:64px
}
#media (max-width:600px) and (orientation:portrait){
md-toolbar{
min-height:56px
}
md-toolbar-row{
height:56px
}
}
#media (max-width:960px) and (orientation:landscape){
md-toolbar{
min-height:48px
}
md-toolbar-row{
height:48px
}
}
I have solved this by putting the md-toolbar and md-progress bar inside a floating-header-div class as one unit. That way progress bar is always below the toolbar regardless of the size
<!--floating header-->
<div class="floating-header-div">
<md-toolbar>
<button md-icon-button class="ml-xs toolbar-button" (click)="sidenav.toggle()">
<md-icon id="menu-icon">menu</md-icon>
</button>
<span id="app-title">MyApp</span>
</md-toolbar>
<md-progress-bar *ngIf="isLoading" mode="indeterminate" color="accent"></md-progress-bar>
</div>
/*------------------------------*/
/*tool bar*/
/*------------------------------*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}
How would you resize a carousel according to browser's height ?
For resizing according to width, Im able to make it responsive with this in CSS
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
But for making it responsive towards height, im not sure how would I do it.
Any clue ?
You can use css unit vh for using screen height purposes. 100vh means whole viewport height. vh is dynamic so it changes as you change the screen size.
Here is one demo from fiddle
.carousel .item {
max-width: 100%; /*slider width*/
max-height: 100vh; /*slider height*/
}
Thanks Sachin Kanungo.
I had the same issue as Max.
But for me it worked with these settings:
.carousel {
height: 80vh; /*slider height equals to 80% of viewport height*/
margin-bottom: 60px;
}
.carousel .item {
min-width:100%;
height:80vh; /*slider height equals to 80% of viewport height*/
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 80vh; /*slider height equals to 80% of viewport height*/
}
Note: I'm using bootstrap 3.3.6
I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.
Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.
Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }