I would like to include simple media queries to my css file, but they are not working and I've been digging for answers from other questions for too long.
This is the media query I am trying, which I think is most correct:
#media screen and (max-width: 600px) {
body {
background-color: red;
}
}
I have also tried these versions of the code above:
#media screen and (max-width: 600px) {
body {
background-color: red !important;
}
}
#media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
#media (max-width: 600px) {
body {
background-color: red;
}
}
This is my html header with the famous meta tag:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Tinos&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bdcb973a27.js"></script>
This is my footer:
<footer class= "accent-color">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</footer>
I feel like I am going insane with this, please help! Thank you!
Max-width media queries mean the style will only show up to the width you define. Any of the media queries you've written should work if your screen is 600px or less. Change max-width to min-width and your red background will display on any screen larger than 600px wide.
*Assuming your HTML has a body tag and your CSS file is in the location you've referenced.
Related
I am currently learning polymer and I am struggling with one of the example on the Polymer website. The example is this one : https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header.
My index.html is the same as the one in the Sample toolbars section, I have just replaced the body with the one in the Condensing Header.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- import latest release version of all components from polygit -->
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-header id="header" effects="waterfall" fixed condenses>
<app-toolbar>
<div title>Left</div>
<div title>Title</div>
<div title>Right</div>
</app-toolbar>
<paper-tabs selected="0" primary>
<paper-tab>Food</paper-tab>
<paper-tab>Drink</paper-tab>
<paper-tab>Life</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
To make things easier: Plunker
In the Polymer tutorial, Left / Title / Right are resp. on the left, center and right of the header but in my version, they are all on the left. Any idea why ?
Thanks
The image in jumbotron has spaces all around. When I reduce the padding in CSS, it is being overridden by Bootstrap CSS.
!important is not working. My CSS file is after the Bootstrap CSS.
Trying out a lot on this!
Please help!
Thanks in advance
HTML PART:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<body>
<header>
--- NAVBAR PART
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/jumb1.jpg" alt="Pic1" class="img-responsive center-block">
</div>
</div>
CSS:
.jumbotron {
padding-right: 10px;
padding-left: 10px;
}
If you open browser's element inspector, you can see what exactly overrides your CSS rules and how to avoid it. So, if you see something like this being written in bootstrap.css:
#media screen and (min-width: 768px) {
.jumbotron {
padding: 48px 0;
}
In order to overwrite it, you should use a media query as well. For example:
#media screen and (min-width: 768px) {
.jumbotron {
padding: 20px 10px;
}
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.
I'm building a website with the latest version of Bootstrap, mostly going fine besides a few small gripes.
The major one being my lists. I have two lists which work fine down to 768px wide. After that, they stack even where there is plenty of space for them to appear inline.
It's just an annoying little thing that I want sorted.
Code for my lists:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</body>
By stacking up do you mean the text is overlapping? If that's the case, you could use media queries to change the size of the typography as the screen size changes.
See the fiddle below and resize (make smaller) the bottom right pane to see the font size change.
Sample code:
#media only screen and (min-width: 1100px) {
body { font-size:120%;}
.wrap {max-width:770px;}
}
#media only screen and (max-width: 800px) {
body { font-size:100%;}
}
#media only screen and (max-width: 400px) {
body { font-size:75%;}
}
Fiddle.
I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.