Below is a CSS class used to render a div with some links on one of the pages. I want to hide the div in mobile view(Mobile and tablets) and display only in desktop browsers. I am using SCSS.
What changes should I make to the CSS class?
.ps-widget__content {
#extend %list-reset;
ul {
border: 1px solid #d1d1d1;
li {
border-bottom: 1px solid #d1d1d1;
a {
display: block;
padding: 15px 20px;
line-height: 20px;
font-size: 16px;
font-weight: 500;
color: $color-heading;
text-transform: capitalize;
i {
margin-right: 10px;
}
&:hover {
background-color: $color-1st;
color: #fff;
}
}
&:last-child {
border-bottom: none;
}
&.active {
background-color: $color-1st;
a {
color: #fff;
}
}
}
}
}
You need to use media queries that that compiled by SCSS into following CSS out put or similar.
/* for desktop start */
div {
background-color: green;
}
/* for desktop end */
/* for tablet start */
#media screen and (max-width: 992px) {
div {
background-color: blue;
}
}
/* for tablet end */
/* for mobil start */
#media screen and (max-width: 600px) {
div {
background-color: yellow;
}
}
/* for mobile end */
<div>css automaticaly adjusts rules as view changes</div>
I'm trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:
#media screen and (max-width:1029px){
h1{
font-size: 75px;
}
h2{
font-size: 25px;
}
}
#media screen and (max-width:980px){
h1{
font-size: 70px;
}
h2{
font-size: 20px;
}
}
#media screen and (max-width:954px){
h1{
font-size: 65px;
}
h2{
font-size: 15px;
}
}
The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
I think you should realigned your media, it will be work for you may be.
I make a fiddle and it's working as you want with media query
working fiddle
#media screen and (max-width:954px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 15px;
}
}
#media screen and (max-width:1029px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
#media screen and (max-width:980px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
}
}
Basically I'm playing around with these and I noticed that some of the properties do change as I want. Some (text-transform and font-size) have no effect (they work outside of the media query but not in). The p and #icon part work flawlessly, as well as color and font-family for .title, so I have zero clue as to why this happens.
Relevant code snippets:
#media only screen and (max-width: 1000px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
And for the regular screen size I have
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
And in the HTML part
<h1 class="title" style="text-align: right; margin-bottom: 0px;">Jane Doette</h1>
For rules where the selectors are equally specific, the last one takes precedence.
Make the rule inside the media query more specific, for example changing .title to h1.title, or place the rules for regular screen size before the media query.
My guess is that your media query is placed before the non-media query style. If so, put your media query after: JS Fiddle - Media Query Last
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
#media only screen and (max-width: 500px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
Otherwise, if the media query is first, the last styles in the style sheet will take precedent: JS Fiddle - Media Query First
I have this html that I cannot edit:
<div id="menu">
Home |
Meet Our Physicians |
Services |
</div>
I have to make it responsive and when when on mobile I want to delete the |
How can I target it? Something like:
#media screen and (max-width:480px){
element{
display:none;
}
}
Try this:
#media screen and (max-width:480px) {
#menu > a{
margin-right: -10px; /* getting the elements closer */
}
#menu {
color: transparent; /* making the open text's color transparent */
}
}
Working Fiddle
The only way to emulate this (CSS cannot target text that is not part of an element, unfortunately), is to target the containing element and then override the styling in the descendant <a> elements:
#media screen and (max-width:480px){
#menu {
font-size: 0;
}
#menu a {
font-size: 16px; /* or whatever */
margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
}
}
Edit:
Maybe something like that:
#media screen and (max-width:480px){
#menu {
text-indent: -9999px;
font-size: 0px;
}
#menu a {
text-indent: 0px;
font-size: 14px;
}
}
First: it's commercial software, I can't share a link to it so you can see what's happening. Ugh. Makes everything harder.
I've written a block of css for print purposes. Here were my steps:
Load page in application
copy HTML from developer tools
Paste html into jsfiddle (so, all the classes/structure is there properly)
write the css in jsfiddle--stuff looks like I want it to look
copy css from jsfiddle into my inquiryPrint.css file (the file that loads for printing)
SOME of the css works, some of it doesn't
Things I considered:
An override issue; inquiryPrint.css is the last file loaded, it should apply its overrides last
The print css file isn't invoked only on media type of print...in fact, here it is:
printWindow.document.write('<link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" />');
This is the most important, I think: the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
Things I tried:
Close/reopen
chrome hard refresh (cmd-shift-R)
it's shared code; I
pushed my changes up to our dev environment, pulled them down on a
co-worker's page, and validated it's not working on his computer
either.
Update
This isn't an override issue. We've even reduced/stripped out all other css files and the problem persists.
This isn't a specificity issue with complex selectors. Almost every selector is single-tier/level (see examples).
This isn't a browser issue. It does not work in Chrome or Firefox (although, of course, those two pages render slightly different).
I had originally cut/paste from jsfiddle, so I thought it might be a cut/paste issue. It's not--we we-wrote the classes by hand with no fix.
It's not a spelling issue, we've tested it by replacing '.admItem' with '.georgeItem' and cut/paste that into the correct place, didn't fix it.
Again, it's seeing OTHER content from the file, just not THIS content.
We stripped the whole css file empty, just left one class, it still didn't pick it up.
I put embedded CSS into the head of the HTML file, it is not picking that up either, for this one class, but it IS picking up other values we put there (e.g. body text transform: uppercase).
We can click through developer tools and see the correct css file, with the correct current changes so it shouldn't be a pointer/syntax issue--it sees the file is there, and picks SOME values from it, not others.
A few screenshots:
Chrome Developer Tools
The Embedded CSS
Here is the css file in its entirety.
.georgeItem {
text-transform:lowercase!important;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.heading {
font-weight: 700;
padding: 10px 0px;
}
h1 {
font-weight: 700;
padding: 10px 0px;
text-transform: uppercase;
font-size: 15px;
font-size: 1.5rem;
margin: 0 0 5px 0;
}
h2 {
font-weight: 700;
padding: 10px 0px;
font-size: 14px;
font-size: 1.4rem;
}
h3 {
font-weight: 700;
padding: 10px 0px;
font-size: 13px;
font-size: 1.3rem;
}
h4 {
font-weight: 700;
padding: 10px 0px;
font-size: 12px;
font-size: 1.2rem;
}
h5 {
font-weight: 700;
padding: 10px 0px;
font-size: 11px;
font-size: 1.1rem;
color: #4c7a87;
}
h6 {
font-weight: 700;
padding: 10px 0px;
font-size: 10px;
font-size: 1rem;
color: #66909c;
}
p {
font-size: 10px;
font-size: 1rem;
padding: 0 0 5px 0;
color: #515151;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
pre em {
font-style: italic;
color: #686667;
}
.inquiryPrint {
font-family: 'Trebuchet MS',Helvetica,sans-serif;
font-size: 10px;
font-size: 1rem;
}
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
table {
border-collapse: collapse;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
size: landscape;/*does not work in some browsers like chrome */
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
.inquiryPrint table {
width: 100%;
background-color: #ffffff;
}
.inquiryPrint tr,
.inquiryPrint thead tr,
.inquiryPrint tbody tr,
tr,
th,
td {
page-break-inside: avoid;
}
.inquiryPrint tr th,
.inquiryPrint thead tr th {
border-bottom: 2px solid #c0c0c0;
padding: 5px;
}
.inquiryPrint tr,
.inquiryPrint tbody tr {
border-bottom: 1px dashed #c0c0c0;
vertical-align: top;
}
.inquiryPrint tr:last-child,
.inquiryPrint tbody tr:last-child {
border-bottom: none;
}
.inquiryPrint tr td {
padding: 5px 10px 10px 2px;
text-align: center;
}
.inquiryPrint tr td,
.inquiryPrint tbody tr td {
text-align: center;
}
.inquiryPrint tr td.right,
.inquiryPrint tr th.right,
.inquiryPrint tbody tr td.right,
.inquiryPrint thead tr th.right {
text-align: right;
}
.inquiryPrint tr td.left,
.inquiryPrint tr th.left,
.inquiryPrint tbody tr td.left,
.inquiryPrint thead tr th.left {
text-align: left;
}
/*.inquiryPrint tr td.totalRow,
.inquiryPrint tbody tr td.totalRow {
text-align: right;
font-weight: 700;
font-size: 10px;
font-size: 1rem;
}*/
/* supports 15 character value with padding */
.inquiryPrint .wide15 {
width: 100px;
}
/* supports 30 character value with padding */
.inquiryPrint .wide30 {
width: 200px;
}
/* trying to insert code conversion to flexbox for printing clinical order only */
.head {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
border-bottom:1px solid black;
padding-bottom:5px;
margin-bottom:10px;
}
.value {
display:-webkit-inline-flex;
}
.row {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
.head .row {
display:-webkit-flex;
-webkit-flex-direction:column;
-webkit-justify-content:flex-start;
}
.admLabel,.label,.label_left {
text-align:left;
font-family:Arial;
font-weight:700;
font-size:1em;
margin-right:3px;
}
.row.pushRight {
text-align:right;
-webkit-flex-direction:row;
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
.admPatientDetails .row {
margin-top:20px;
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:space-between;
}
.clinicalOrderLineAdministrationDetails table {
width:100%;
border-collapse:collapse;
}
.clinicalOrderLineAdministrationDetails table tbody tr {
border-bottom:1px dotted #818181;
}
.admItem {
display:-webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:flex-start;
}
We found the issue last night. The way we were dynamically generating the page in javascript, there wasn't a doctype declaration at the top of the page. Once we added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Everything worked fine. Sigh.
the site is picking up SOME of the valid CSS selectors from the inquiryPrint.css file, but not ALL of them; e.g., it sees .row and applies it's CSS, but doesn't see .admItem and apply its CSS. And this is the stuff that works correctly in the jsfiddle--i.e. .admItem works in jsfiddle but not my app.
That sounds as if the other stylesheets, that are not targeted at any medium specifically, override the rules you have in your print stylesheet by using more specific selectors.
Using a tool like Firebug you'll be able to see which CSS rules are being applied and why they're overriding other styles.
As CBroe states, it's quite likely that CSS styles with more specific selectors are overriding your stylesheet. Clearly your stylesheet is being read, so that's not the issue.