By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.
Here is the jsfiddle like.
Here is the basic css code (1).
(1)
#media only screen and (min-width: 480px) {
.menu li.hide{
visibility: none;
}
}
#media only screen and (min-width: 768px) {
.menu li.hide{
visibility: visible;
}
}
(2)
<ul class="menu">
<li>One</li>
<li class='hide'>Nine</li>
</ul>
Try this - DEMO
#media only screen and (max-width: 768px) {
body{
background:#030;
}
.menu li{
font:12px Verdana;
width:100px;
padding-left:10px;
}
.menu li:last-child{
display: none
}
}
#media only screen and (min-width: 769px) {
body{
background: honeydew;
}
.menu li{
font:22px Verdana;
width:200px;
padding-left:20px;
}
}
You can set the min and max width on the media query:
#media screen and (min-width: 480px) and (max-width: 768px) {
I've updated your jsfiddle: http://jsfiddle.net/yyQ5u/28/
It looks like the main problem was with the order of things and the actual media queries. I put your non-conditional CSS at the top of the CSS pane and the media queries below.
Then I tweaked the media queries which seemed to sort of cover each other:
#media only screen and (max-width: 768px) {
and
#media only screen and (min-width: 768px) {
Related
i am trying to hide my header logo on mobile so i put the following code in my css but it did not work,
someone tel me which code should i put in css or which directory of chamilo LMS?
#media only screen and (max-width: 568px)
div#logo {
display: none;
}
}
There is no id called logo in your html. Try this instead:
#media only screen and (max-width: 568px) {
.logo {
display: none;
}
}
I am new to JS and would like to programmatically find all the screen width based breakpoints (at least all the media-quires including min or max) applied to the current webpage. Do I need to parse the style sheets as pure text and look for breakpoints that way? Or are there alternative approaches?
I have looked at manual approaches and semi-automated tools that may help find these but I want to programmatically execute pure JavaScript code to find all the screen width based breakpoints(at least media queries) of the current webpage loaded.
#media (min-width: 1281px) {
//CSS
}
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
//e.g. credited https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
I would expect as output all the screen width breakpoints ['320','480','481','767','768','1024','1025','1280','1281'].
Thanks for any advise.
Access the stylesheets through the API provided. Loop over them and get the rules from each. Loop over those and filter out the ones which aren't media rules. Then you can read the conditionText from each one.
You'll need to parse the condition text to find the breakpoints.
Array.from(document.styleSheets).forEach(sheet => {
Array.from(sheet.cssRules).forEach(rule => {
if (rule.type === CSSRule.MEDIA_RULE) {
console.log(rule.conditionText);
}
});
});
#media (min-width: 1281px) {
body {
background: blue;
}
}
#media (min-width: 1025px) and (max-width: 1280px) {
body {
background: red;
}
}
#media (min-width: 768px) and (max-width: 1024px) {
body {
background: green;
}
}
I have spent several hours trying to figure out what is the problem ..
I have no idea what is wrong with media queries.
How css files are included in index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom styles CSS -->
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet">
The part of my main.css file
#home {
font-size : 1.5rem;
background: url(../images/home2.jpg) no-repeat center center;
-webkit-background-attachment: fixed;
background-attachment: fixed;
background-color: #backgroundHomeColor;
background-size: cover;
padding: 0;
position: relative;
white-space: normal;
}
/* === MAIN === */
.section-padding {
padding: 6rem 0;
}
The responsive.css file
#media only screen and (max-width:1920px) {
.personal-info{
padding-right:180px;
}
}
#media only screen and (max-width : 1600px) {
}
#media only screen and (max-width : 1280px) {
}
#media only screen and (max-width : 1200px) {
.portfolio-item{
min-height: 150px;
}
.download-button a{
margin-right: 10px;
}
}
#media only screen and (max-width : 992px) {
.navbar-custom .navbar-brand{
padding: 10px 15px;
}
.navbar-custom .navbar-nav > li > a,
.navbar-custom .navbar-nav .dropdown-menu > li > a{
font-size: 12px;
padding: 15px;
}
/*about me section*/
.biography {
margin-top: 20px;
margin-bottom: 45px;
}
/*resume*/
.resume:before,
.resume:after{
left:0px;
}
}
#media only screen and (max-width : 768px) {
// Home intro section
#home {
font-size : 1.4rem;
}
.md-full-height {
height: 560px !important;
}
// General styles
.section-padding {
padding: 222rem 0;
}
.social-icons ul{
margin-left: 0;
}
.social-icons li{
padding:0;
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
#home {
font-size : 1.2rem;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
#home {
font-size : 1.0rem;
}
}
The most problematic is #media only screen and (max-width : 768px) {
It works sometimes, sometimes not, I have no idea what is wrong.
Consider this class
#home {
It works with media 320px,480px, 992px .... but IT DOESN'T apply style for 768px media query even with !important.
One interesting thing I've noticed that if styles are not declared in main.css
like this one
.social-icons ul{
margin-left: 0;
}
Is applied from this 768px query, but if style is declared in main.css it is not applied, but only from 768px query.
But if I move all these media queries styles to the bottom of the main.css everything works perfectly.
I have no idea what to do .. I have spent a lot of hours trying to find the solution for this 768px media query.
You are using double slash // for comments inside 768px media query. This is not valid in CSS where the comments must be writed like this: /* comment */
You get a CSS syntax error and the block of code is not executed.
I have a div element in html which contains a video tutorial which I want to display only when viewed on tablets and not on mobiles or desktops. How do I achieve this?
You can use CSS media queries to solve this. The standard size for tablets is the range 768px to 992px. So, you can write two media queries: one for less than tablet-size(mobiles) and other for greater than tablet-size(desktops). And then set visibility to hidden and display to none. Any css you want to write for tablet size you can include it in your normal standard css.
#media screen and (max-width: 768px) {
.divclass {
visibility: hidden;
display: none;
/* your any other css styles */
}
}
#media screen and (min-width: 992px) {
.divclass {
visibility: hidden;
display: none;
/* your any other css styles */
}
}
Using media queries of screen width:
#media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
#media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
#media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
#media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Here with specific screen width you can set element's css display:block; and otherwise display: none;
So for your code it should be
#media (min-width:320px) { display: none; }
#media (min-width:801px) { display: block; }
#media (min-width:1025px) { display: none; }
Let's assume your div has a class named as 'container'.
#media (min-width: 768px) and (max-width: 1024px){
.container{
display: block;
}
}
#media (max-width: 767px){
.container{
display: none;
}
}
#media (min-width: 1025px){
.container{
display: none;
}
}
No worries. Use the following custom classes that I’ve put together! Note that with media queries (which these classes utilize), you’ll lose some browser support with older versions of Internet Explorer…So fix that with Respond.js!
In your stylesheet, add the following:
//medium+ screen sizes
#media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
This gives you two classes — mobile-only and desktop-only.
As the names imply, if you assign something with the “mobile-only” class, then it will only display when the screen size is tiny (991px or below) [smartphones, some tablets], whereas “desktop-only” will show only on sizes 992px or higher.
These values are easily changed and the whole concept can be modified without issue. You could even add an “xl-desktop-only” class. To get you started…
//large resolutions only
#media (min-width: 1200px) {
...
}
Media queries are great for responsive design. Just make sure to not over do it and add way too many breakpoints. You’ll give yourself a headache if you try to account for everything.
I was working on this site.Please check the link http://mrsinghcafe.com/real/
It has a slider on home page with text.In small resolutions the slider appears but without Text
I want text also to appear on small resolutions.
I tried adding the following to my css
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
but didn't help.Can some one please help me .Thanks.!!
The display:none; of the #div1content is responsible here:
#media only screen and (max-width: 767px) {
#div1content{ display:none;}
}
Remove it and position the text how you like it.
found this in your CSS:
#media only screen and (max-width: 767px) {
#slidecaption {
...
}
.slide_text {
display: none;
}
#slidecaption h2 {
...
}
}
.slide_text is display: none, and after this rule, no rule to set it to block again.
in slider_text_n_desription.css, you will find above rule. overrule it a bit down by adding display: block
#media only screen and (max-width: 479px) {
.slide_text {
bottom: 120px;
font-family: 'Eurostile-Normal';
font-size: 12px;
margin-left: 10%;
position: absolute;
display: block;
}
}
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
use semicolones