My CSS code
[class*="nav"] {width: 100%; }
#media only screen and (min-width=1024px) {
.nav {width= 38%;}
}
is it possible to change [class*="nav"] into [div*="nav"]
If I understand you correct, the [class*="nav"] is an attribute selector and the class is the name of the attribute to target, in this case class, so if you want this to apply to a div and not to any other type of elements, containing nav in its class, you do like this
[class*="nav"] {
position: relative;
display: inline-block;
width: 100%;
padding: 10px;
background: red;
margin-bottom: 10px;
}
#media only screen and (min-width: 300px) {
div[class*="nav"] { width: 38%; }
}
<div class="nav-bar">A div</div>
<span class="nav-item">A span</span>
Note, I changed your equal sign = in your #media rules to color :
I think your syntax might be the issue. Try:
div[class*="nav"] {
width: 100%;
}
// You could also just use .nav above, depending on how your elements are named.
#media only screen and (min-width: 1024px) {
.nav {
width: 38%;
}
}
[class*="nav"] finds all the elements with class nav or that have classes that contain the name nav .
see example ( both divs take the css styles )
[class*="nav"] { height:100px;width:100px;background:red;margin:10px 0}
<div class="nav-bar"></div>
<div class="nav"></div>
[div*="nav"] does not exist . nav is a HTML tag just like a div . they are two different tags
div { width:100px;height:100px;background:red;}
nav { width:100px;height:100px;background:blue;}
<div></div>
<nav></nav>
SOLUTION:
1 if you want to select only the nav tags, just use
nav { /*styles here*/ }
2 if you want to select only the div tags that have classes with nav then use
div[class*="nav"] {/*styles here*/}
useful links
Nav tag
Div tag
Related
I have a page that hides a div when the screen is small, showing another div with a clickable + to expand the hidden div.
#media screen and (max-width: 1230px) {
#details_Title {
display: none;
}
#details_Details {
display: inline; // THIS DOES NOT WORK AFTER JQUERY SLIDEUP
}
}
#media screen and (max-width: 990px) {
#details_Title {
display: inline;
}
#details_Details {
display: none;
}
}
The HTML
<div id="details_Title" onclick="showDetails()">
<b>Details</b>
<img id="imgPlusMinus" src="images/plus.png"/>
</div>
<div id="details_Details">
.... the details
</div>
JS
function showDetails() {
var img=document.getElementById('imgPlusMinus').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('imgPlusMinus').src ='images/minus.png';
$("#details_Details").slideDown();
}
else {
document.getElementById('imgPlusMinus').src='images/plus.png';
$("#details_Details").slideUp();
}
}
Make the screen small, the divs show and hide correctly, click the + and the div details_Details expands as expected.
The problem is that if you close it and jQuery slides up the div details_Details, display: none is applied at the element level and the display: inline from the media query does not get applied. How do I get around this? Can I remove/overwrite the element level style from the media query?
$('#click').on('click', function() {
$('#toggle').toggle();
});
#media(min-width:767px){
#toggle{
display: block!important;
}
}
#click{
display: none;
}
#media(max-width:767px){
#click{
display: block;
}
#toggle {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="click">click</div>
<div id="toggle">always show above 767px</div>
Add a declaration for min-width so it will show no matter what.
#media screen and (min-width: 1230px) {
#details_Details {
display: inline!important; // THIS WILL WORK AFTER JQUERY SLIDEUP
}
}
I wrote media query for my HTML code, but not applying. I have to show my text in center in small screen.
#media(max - width: 400 px) {
h1 {
text - align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
How to fix?
The problem that #Zvezdas1989 is removing is that you had a space between 400 and px, they need to be together, just like the max-width and the text-align.
#media(max-width: 400px) {
h1 {
text-align: center;
}
}
So that will fix the problem.
It's not applying because of the spaces, you need to remove those in order to make it valid:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
You need to remove the spaces, like this:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Hello Friends</h1>
I have a text block on my website:
Specialtyreagents
<h1>Specialtyreagents</h1>
Can I somehow add a - symbol to this block within CSS, so it should looks like this:
Specialty-reagents
I can use only CSS in my case!
Thank you for your help.
Use a pseudoelement with the word you want on mobile, and use font-size to hide or show it.
example
codepen
h1:after {
content: 'Specialty-reagents';
font-size: 0;
}
#media screen and (max-width: 500px) {
h1 {
font-size: 0;
}
h1:after {
font-size: 32px;
}
}
<h1>Specialtyreagents</h1>
With just CSS you can't include that - but if you need to use it in a specific case you can write again the text like this with a pseudo-element:
h1 {
font-size: 0;
}
h1:before {
content: "Specialty-reagents";
display: block;
font-size: 1.5rem;
}
<h2>Specialtyreagents</h2>
<h1>Specialtyreagents</h1>
On the long ride you can have two html elements, one for mobile and one for desktop:
<h1 class="desktop">Specialtyreagents</h1>
and
<h1 class="mobile" >Specialty-reagents</h1>
Then, you should have some css code for handling it:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media (max-width: 720px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
With media query:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
<h1>Specialty<span></span>reagents</h1>
As others have said, you can use a pseudo element to achieve this.
The best way to go is to just add a new pseudo element when viewing on a small viewport (ie. a mobile phone). Here is some extra info on pseudo elements and how they can be used.
Example...
#media screen and (max-width: 768px) {
h1 {
font-size: 0px;
}
h1::after {
font-size: 30px;
display: block;
content: "Specialty-reagents";
}
}
<h1>Specialtyreagents</h1>
The only thing you may need to change if the max-width for the media query and the font size of the heading.
Try this code for the solution please:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
I would like to print my page without headings.
Is there a way I can:
make the heading <DIV id="heading"> not show when I am doing a print
and make a <DIV id="summary"> show only when doing a print?
#media print {
#heading{
display:none;
}
#summary{
display:block;
}
}
try to hide/show them via #media blocks:
inside css:
#media print {
#heading {
display: none !important;
}
}
#media screen {
#summary{
display: none !important;
}
}
.heading{display:none;}
means setting the display property to none ..will hide the element
EDIT: Resolved!
EDIT: Kevin's answer resolves the issue; however, it's not clear to me why the float declaration within the #media query doesn't work. Any thoughts would be appreciated--
I have two data sets which are semantically one, chronological list. On tablets and browsers, I'd like to display these lists as two separate columns. On a phone or smaller screens, I'd like to collapse the two columns into a single column preserving their chronological order. A solution which preserves the chronological ordering of the elements is an ordered list which I style to create the appearance of two columns; e.g. here is a fiddle demonstrating that solution.
Basically, I have an ordered list whose list elements have one of two classes (.left or .right) which cause them to float to the left and right, and I have a set of #media-queries which creates the responsive behavior I want. The issues is that while I can float them left and right, I don't know how to create the vertical flow I want. e.g. in that fiddle, I have a list,
<body>
<ol>
<li class='left'>Left 1 <br> Left 1 continued </li>
<li class='right'>Right 1</li>
<li class='right'>Right 2</li>
<li class='left'>Left 2</li>
</ol>
</body>
which is styled simply,
<style>
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
#media (min-width: 50em) {
body {
width: 50em
}
li {
width: 45%
}
}
#media (max-width: 50em) {
li {
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
}
li {
display: inline-block;
}
li.left {
background-color: blue;
}
li.right {
background-color: red;
}
</style>
But, with that, the content in the right column appears shifted down--as below:
instead of what I actually want, which would look something like this:
I know that I can implement this as two separate columns/divs which are re-ordered by JavaScript on a smaller screen, but I was wondering if there was a way which would preserve the semantic aspect of their ordering while avoiding the vertical flow issues here?
Thanks!
your fiddle
The problem is that those elements were not floating elements.
Giving them the float property in that particular media query simply doesn't work as you expected. Check now, it should go. Just enlarge the window of the fiddle.
Your new CSS
#media (max-width: 50em) {
li {
width: 100%;
}
}
li.left {
float:left;
background-color: blue;
}
li.right {
float:right;
background-color: red;
}
Here is quite a bit of a different attemp. Maybe it fits your need.
http://jsfiddle.net/NicoO/vyMWS/2/
your question is quite confusing, you should have not put the phrases left and right into your image, but: start story 1 + end story 1 etc.
ol
{
margin: 0;
padding: 0;
list-style-type: none;
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
ol li
{
background-color: blue;
display: block;
}
ol li:nth-child(2n)
{
background-color:red;
}
#media (max-width: 50em) {
ol
{
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
}