I am making a responsive website, which works on different screens on pc's.
But my media query for the iPhone seems to work not properly. When I launch the website it displayed incorrect. When I refresh 2 things can happen: It turns into the correct display, or it turns the whole page white. Refreshing then keeps the screen white.
This is my css media query:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
body
{
overflow-x:hidden;
}
section#info
{
width:90%;
font-size:350%;
height:auto;
font-family:Futura;
}
section#infoMeenemen
{
width:90%;
font-size:350%;
height:auto;
font-family:Futura;
}
nav
{
min-width:90%;
top:12.5%;
margin-left:2.5%;
font-size:175%;
font-family:Futura;
}
div#navigationSection
{
min-height:300px;
}
div#newsSection
{
min-height:430px;
font-size:175%;
}
section#news
{
padding-top:6%;
text-align:center;
font-family:Futura;
font-size:1.3em;
}
section#food
{
text-align:center;
}
#imgLunch
{
display:block;
margin-left:0%;
min-width:100%;
}
#imgHightea
{
display:block;
margin-left:0%;
min-width:100%;
}
#imgLekkers
{
display:block;
margin-left:0%;
min-width:100%;
}
section#food
{
font-size:300%;
font-family:Futura;
}
section#food img
{
min-width:80%;
}
footer
{
font-size:150%;
height:600px;
}
#footerBack
{
background-color:black;
}
article#tijden
{
margin-left:4%;
float:left;
width:40%;
}
article#informatie
{
float:left;
width:40%;
}
article#werken
{
width:80%;
}
footer article
{
height:auto;
font-family:Futura;
color:white;
}
Related
I'm using MatSnackBar for my angular 5 project, and I cannot seem to change the color of the 'action' button.
I've injected the snack bar to my HttpInterceptor:
this.snackBar.open('Invalid Login', 'Ok', {
duration: 2000,
panelClass: ['my-snack-bar']
});
my css:
.my-snack-bar {
background-color: #E8EAF6;
color: #3D5AFE;
}
How can I change the 'Ok' action button color?
Version: "#angular/material": "^5.2.4",
You can access the colors with the panelClass option + the generated class ".mat-simple-snackbar-action".
My example:
snackbar.component.ts
private configSuccess: MatSnackBarConfig = {
panelClass: ['style-success'],
};
private configError: MatSnackBarConfig = {
panelClass: ['style-error'],
};
public snackbarSuccess(message) {
this.snackBar.open(message, 'close', this.configSucces);
}
public snackbarError(message) {
this.snackBar.open(message, 'close', this.configError);
}
snackbar.component.css
.style-success {
color: $primary-text;
background-color: $primary;
}
.style-success .mat-simple-snackbar-action {
color: $primary-text;
}
.style-error {
color: $warn-text;
background-color: $warn;
}
.style-error .mat-simple-snackbar-action {
color: $warn-text;
}
Extra info If using a mixin for custom themes you can do something like this to get all the colors:
#mixin snackbar($theme) {
$primary: mat-color(map-get($theme, primary));
$primary-text: mat-color(map-get($theme, primary), default-contrast);
$warn: mat-color(map-get($theme, warn));
$warn-text: mat-color(map-get($theme, warn), default-contrast);
.style-success {
color: $primary-text;
background-color: $primary;
}
.style-success .mat-simple-snackbar-action {
color: $primary-text;
}
.style-error {
color: $warn-text;
background-color: $warn;
}
.style-error .mat-simple-snackbar-action {
color: $warn-text;
}
}
As mentioned above one can customise the style of the snack bar using the panelClass configurationn.
this.snackBar.open(message, action, {
duration: 40000,
panelClass: "success-dialog"
});
The key here is to override via CSS the mat-simple-snackbar-action. This will do the trick of changing the action button text color.
.success-dialog {
color: white !important;
background-color: $success !important;
.mat-simple-snackbar-action {
color: white !important;
}
}
This worked for me:
.my-snack-bar button {
background-color: gray;
color: white;
}
Use this
.my-snack-bar {
background-color: #E8EAF6;
}
css in your style.css(or .scss) file. It will not work if you put anywhere else.
please add the following in app style.css
.mat-simple-snackbar { font-weight: 600; } // text
.mat-simple-snackbar-action > button { color: red } // action
enjoy!
For me, below code is worked.
::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
color: black;
}
Steig's answer is correct but if that doesn't work then you should add /deep/ in front of your class:
/deep/ .my-snack-bar button {
background-color: gray;
color: white;
}
You can use this:
let mysnackbar: any = document.querySelectorAll('.my-snack-bar')[0];
mysnackbar.style.cssText += "color: #3D5AFE;backgroundColor: #E8EAF6";
it works for me.
I need a jQuery Mobile flipswitch with custom width & height. I managed to change the size of it by wrapping the flipswitch in a div and applying the following CSS:
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
}
However the text is not positioned correctly. Check the jsfiddle here:
https://jsfiddle.net/dinkoivanov/8czs4qzn/
I think I might not be doing the correct thing. Can you advise if that is possible in jQuery Mobile?
As exemplified here you might need to introduce in CSS
custom indentations
custom widths
because the length of custom labels differs from the length of the
standard labels
You can position the text by correcting the indentation in the CSS
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
}
Updated: https://jsfiddle.net/8czs4qzn/1/
Position the text in the middle (see comment below):
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
line-height: inherit;
}
#flipswitchWrapper .ui-flipswitch-off {
line-height: inherit;
}
With vertical alignment of labels: https://jsfiddle.net/8czs4qzn/3/
My backgrounds looks totally wrong on my Ipad and Iphone, when I test it.
I have search here on stackoverflow for my problem, but without luck!
I know that "background-size:cover" is the problem, but i don't know how to fix it.
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#home, #videos, #downloads {
height: 100vh;
}
#music, #tourplan, #facebook, #profile {
min-height: 100vh;
height:auto;
}
I am agree that "background-size: cover" is not working properly in Ipad and Iphone due to small width. So, If you have on problem, you could use any background color (according to your choice) for Ipad and Iphone.
/* Ipad Layout: 480px. */
#media only screen and (min-width:480px) and (max-width: 767px){ {
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
background: #ddd; /* Just as an example */
}
}
/* Iphone Layout: 360px. */
#media only screen and (min-width: 360px) and (max-width: 479px) {
#home, #music, #videos, #tourplan, #facebook, #profile, #downloads {
background: #ddd; /* Just as an example */
}
}
If you like to use different background colors instead of different background images, you could use this code:
#home {
background: #ddd; /* Just as an example */
}
#music {
background: #eee; /* Just as an example */
}
#videos {
background: #fff; /* Just as an example */
}
#tourplan {
background: #000; /* Just as an example */
}
#facebook {
background: #00ff00; /* Just as an example */
}
#profile {
background: #ff0000; /* Just as an example */
}
#downloads {
background: #0000ff; /* Just as an example */
}
In that case, you need to put this code your particular CSS media queries areas like . You need to change the element color such as text color etc. To see the site like this, please visit this link: http://www.ollo.com.br/m/
Keep well.
I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.
I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.
When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?
I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md
Edit: After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of
<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>
or
<div class="col-md-4 col-sm-6 col-xs-12"></div>
The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?
Thanks in advance
It would be helpful to provide a JSBin. Anyway, since I had this layout in JSBin with col-sm-(asterisk), you can just change all the -sm- to -xs- in between the print media query. All percentages are the same at every breakpoint, so changing sm to xs will print that and ignore the other col-(asterisk) classes. Ahh, I read the post now, you'll need to change all the col-sm to col-md in this and then use !important, that should do it. The xs col are outside media queries, so that's why this is happening.
http://jsbin.com/AzICaQes/5
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
}
Actually, all you need to add (to user.css) is this:
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
}
While you're at it, consider using all these settings for bootstrap 3
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
I ended up solving the problem using an own print.css file without all the responsive bootstrap stuff included. Only included some of the necessary bootstrap things with show and hide.
For those who use bootstrap mixins to create columns like this (sass version):
#include make-sm-column(3, 0);
it won't be enough to overwrite the styles for columns classes like Christina suggests. The only simple solution I've found was to change $screen-sm in _variables.scss to 595px and recompile bootstrap.css
So, find this code in _variables.scss:
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
and change it to this:
// decrease min-width to fix print layout issue
$screen-sm: 595px !default;
$screen-sm-min: $screen-sm !default;
then in your _print.scss
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 768px;
}
body {
margin: 0 auto;
}
// .. your custom styles for print layout
}
Add This css style in your print.css file
#page {
size: A4;
margin: 40px;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
#-moz-document url-prefix() {}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
I had the similar problem. I ended up replacing all col-md-* with col-xs-* and it worked like a charm. Here is the exmaple code
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-md-9 text-center main-title col-md-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
converted to
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
Did someone create a nice stylesheet for this:
http://mvccontrib.codeplex.com/wikipage?title=Grid&referringTitle=Documentation&ProjectName=mvccontrib
Thanks.
Christian
I have made a start - no css expert though:
table.grid
{
margin:0.5em;
}
tr.gridrow
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
background-color: #e8eef4;
}
.gridrow td
{
padding:1em;
font-size:smaller;
text-align:center;
max-width: 300px; /*or whatever*/
word-wrap: break-word;
}
.gridrow_alternate td
{
padding:1em;
text-align:center;
}
tr.gridrow_alternate
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
}