Using CSS to selectively display content, avoiding conflicts - html

I'm using CSS to selectively display content depending on viewport size. E.g.:
CSS:
.hires, .midres, .lowres {
display: none;
}
#media only screen and (min-width: 801px) { /* hires, desktop */
.hires {
display: inline;
}
}
#media only screen
and (min-width: 600px)
and (max-width: 800px) { /* mid res, tablet */
.midres {
display: inline;
}
}
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
.lowres {
display: inline;
}
}
HTML:
<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>
Which works, but only up to a point. When it comes to images, it turns out that I've neatly painted myself into a corner here. Because somewhere down the line there's something like:
CSS:
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img {
float: none;
display: block;
width: 100%;
height: auto;
}
}
Which means that in the following case:
<img src="foo.jpg" class="hires" />
the image is always displayed regardless of viewport size, because the 'display: block;' overrides (conflicts with, really) the preceding rules to selectively display the image or not.
Unfortunately 'display' has no opposite of 'none'. I can't use 'visibility' because that will still leave a gap where the hidden content used to be. I could use jQuery to show() and hide() content, but I'd rather not move part of my styling from the style sheets (where it belongs) to Javascript (where, strictly speaking, it doesn't).
Unfortunately I noticed this little snafu only now, quite a way into the project. Which means I'm an idiot. :-)
What would be the best way to deal with the above issue?

You could either wrap images in something with the class lores or use img.lowres as selector in your css, ie
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img.lowres {
float: none;
display: block;
width: 100%;
height: auto;
}
}

Related

How To Change Font Color on Mobile Res

I'm having hard time trying to fix this small issue with my website, so the body text shows in white on the desktop, which is good, but when I use the smaller devices I don't want the text to show white because it collapse with the white background and you can't read the text. How can I change it to another color for mobile versions, with CSS, or HTML?
This Is How It Shows On Desktop
This Is How It Shows On Smaller Screens (Phones, Tablets, etc)
Edits from Stackoverflow (that didn't work)
CSS:
#media only screen and (max-width: 600px) {
.mob1 {
color: #ffffff;
}
}
#media only screen and (min-width: 600px) {
.mob1 {
color: #000000;
}
}
HTML:
<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
I tried to add the mob1 to the p class, didn't worked either.
Try to use media queries.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For more details: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
try this
on the html file, if it is a p element, or whatever type of text element it is,
<p class="colourTest">TEXT</p>
in the css file:
//for screens smaller then mobile
#media only screen and (max-width: 600px) {
.colourTest {
text-color: black;
}
}
//for screens bigger then mobile
#media only screen and (min-width: 600px) {
.colourTest {
text-color: white;
}
}

(html) How do I hide my navbar when my website is viewed on mobile?

Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>

How is min-width media query rule s mobile first approach

They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)

Media Queries not working at all whatsoever

I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}

How to make content show/hide depending on device

I'm looking for a way to show/hide content for an email newsletter based on the device the customer is opening the email on.
I've currently got this snippet of code in the head section:
#media only screen and (max-width: 480px) {
#mobile { display: block; } /* show it on small screens */
#normal { display: none; } /* hide it elsewhere */
}
#media only screen and (min-width: 481px) {
#mobile { display: none; } /* hide it elsewhere */
#normal { display: block; } /* show it on large screens */
}
Along with:
<div id="mobile">content</div> or <div id="normal">content1<div>
This works fine if I was using it for web, I can scale my browser window and content appears/disappears based on the width of the window, but as soon as I send a test through our email system it works fine on mobile but breaks down on desktop (Gmail).
And because this is an email I can't utilise javascript so it all needs to be html/css.
Anything I'm doing wrong or missing?
I feel your pain. Showing and hiding content in html email newsletters was eluding me for ages!
/* Hide on Desktop */
.hide-desktop {
/* non-gmail */
display: none;
/* gmail */
font-size: 0;
max-height: 0;
line-height: 0;
/* outlook */
mso-hide: all;
/* optional, required only if you're using padding */
padding: 0;
}
#media (max-width: 480px) {
.hide-desktop {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
}
}
/* Hide on Mobile */
#media (max-width: 480px) {
.hide-mobile {
display: none;
max-height: 0;
}
}
NOTE: Don't forget to inline the .hide-desktop rule, that is outside of the media query.
So using media queries and a number of hacks we can do a bullish hide all for desktop and then undo it media queries. Inversely, because mobile clients have decent support for media queries, we can hide the mobile content with media queries alone. The outlier, gmail, just gets the desktop view – which is unfortunate but still useable.