I'm creating a coming soon page but want the h1 header to have different titles as the screen widths change. Here's my problem though:
<h1 class="hide1">HOLD ONTO YOUR HATS</h1>
<h1 class="hide2">COMING SOON</h1>
<h1 class="hide3">ON ITS WAY</h1>
<h1 class="hide4">PENDING</h1>
<h1 class="hide5">NIGH</h1>
...and then:
#media only screen and (min-width : 1200px) {
.hide2, .hide3, .hide4, .hide5 {
display: none;
}
}
This is all a bit chopped and hacked together.
Is there a more semantic way of doing this that will 1, hide the other h1's in the source code and 2, Hide the other h1's from screen readers?
Thanks
edit: The title was a little confusing so it has been changed
Ok I don't seem to be able to question something in a way that's making sense, something to work on in the future I guess.
So after working on it for the past couple of days I think I may have found a solution that is less hacky.
<h1><span class="main__header--changer">COMING SOON</span></H1>
...and the css
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
The only thing is though screen readers won't be able to read the header.
Related
I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop:
Grow your
business
faster
, and in mobile, it must look like:
Grow your business
faster
I haven't been able to figure out the way to do this.
Can you give me a clue?
Thanks.
I have tried with word-break, but haven't been successful yet.
You can use a <br> tag in a <span> for which you set up a CSS rule and a media query showing/hiding it:
.a {
display: none;
}
#media screen and (min-width: 480px) {
.a {
display: inline;
}
}
<h1>Grow your <span class="a"><br></span>business<br>faster</h1>
Try This
<style>
#media screen and (max-width: 467px){
.newline{
display:block;
}
}
</style>
<p>Grow your <span class="newline">business</span></p>
The word-break property specifies how words should break when reaching the end of a line.
You could use a combination of HTML and CSS
#media screen and (max-width: 768px) {
#title span {
display: block;
}
}
<div id="title">
Grow your <span>business</span>
</div>
I've read up a lot on adaptive design. All the sources I could find at some point mention server side approach or at least talk about how it makes faster loading times, because you only serve what the client needs. In contrast with responsive design, you deliver out one content that adapts on client side, by media queries for example. Fluid grids and layouts come to my mind.
However, I thought of a very basic, naive and (from my understanding) pretty boneheaded approach that I just could not find a pattern for. Probably because it's so dull.
My idea was basicly to craft a separate view for each device like you'd normally do with adaptive design, but put them into divs and just display the one that matches the device dimensions. This of course delievers, depending on the views, about n-times as much data as server side adaptive design would, with n being the number of different views. However the view could switch on the fly without reloading the page for example. Again, just an idea I had. From my understanding, it does what adaptive design does, just with another technical approach. Is this pattern still called adaptive design?
switches.css and index.html
#media (max-width: 991px) {
.phone {
display: inline !important;
}
.tablet {
display: none !important;
}
.pc {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.phone {
display: none !important;
}
.tablet {
display: inline !important;
}
.pc {
display: none !important;
}
}
#media (min-width: 1200px) {
.phone {
display: none !important;
}
.tablet {
display: none !important;
}
.pc {
display: inline !important;
}
}
html {
font-family: sans-serif;
}
h1 {
font-size: 36px;
}
<!DOCTYPE html>
<html>
<head>
<title>Am I adaptive?</title>
<meta name="viewport" content="width=device-width" initial-scale="1">
<link href="switches.css" rel="stylesheet">
</head>
<body>
<div class="phone">
<h1>on small screen</h1>
<p>Here goes the view for small sized devices</p>
</div>
<div class="tablet">
<h1>on medium screen</h1>
<p>Here goes the view for medium sized devices</p>
</div>
<div class="pc">
<h1>on large screen</h1>
<p>Here goes the view for large sized devices</p>
</div>
</body>
</html>
EDIT: Thanks to the comments so far! I want to emphasize: I totally agree on this being pretty much the definition of an anti-pattern. I hope my question makes that clear! I don't consider this a practical thing. However, I am interested in what this is called (if it is called anything at all), or if it is still adaptive/responsive by definition. If not, why?
To me, this seems more like an anti-pattern, or the 'responsive' design pattern.
The point of adaptive design is to limit the amount of work the browser does, and also to reduce the amount of traffic to and from the device.
Think about how this would work on a device with poor bandwidth, such as a mobile phone with a patchy signal. It makes more sense, from a usability perspective, for the server to decide what to send to the device based on the user-agent, or other criteria.
As far as I understand in HTML5, you should only have one header tag and one footer tag in a document (or at least in a section). But what if you want one footer to appear on screen and a different one to appear when printing. As far as the HTML is concerned, you are adding two footers together, even though only one would appear at a time.
Would screen readers, for example, ignore the print version?
One way of doing this is to put two sections in each, one to be displayed on screen (.noprint) and the other to be displayed for print (.print). Display .noprint as you would and set .print to display none except for when being printed using an '#media print' query.
like this:
<header>
<div class="noprint">
<p>stuff for screen only goes here</p>
</div>
<div class="print">
<p>stuff for print only goes here</p>
</div>
</header>
<style>
.print {
display: none;
}
#media print {
.print {
display: inherit;
}
.noprint {
display: none;
}
}
</style>
Also, to answer your question about screen readers: they usually will not read an element set to display:none and I believe that to be true in this case. Here's a more comprehensive guide on how screen readers deal with display:none:
http://juicystudio.com/article/screen-readers-display-none.php
good luck!
I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?
I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.
I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.
UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works.
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#menu-logo {
display: none;
}
}
<div id="header" class="header">
<img id="menu-logo" src="../images/logo.svg"/>
<img id="menu-logo-semi" src="../logo-semi.svg"/>
<img id="menu-logo-small" src="../logo-short.svg"/>
</div
There's no need to have 3 links.
A better way to do this is as follows:
<div id="header" class="header">
<a class="logo" href="/index.html">My cool name</a>
</div>
<style>
<!-- Desktop -->
.logo {
display: block;
text-indent: -9999px;
width: 200px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}
<!-- Tablet -->
#media all and (max-width: 64em) and (min-width: 48em) {
.logo {
width: 80px;
height: 60px;
background-size: 80px 60px;
}
}
<!-- Mobile -->
#media all and (max-width: 48em) {
.logo {
width: 50px;
height: 30px;
background-size: 50px 30px;
}
}
</style>
Cleaner code.. Just change your logo sizes as you need.
EDIT
I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.
The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.
And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)
So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).
I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")
but let's say I want to write (just for example)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
What is the condition I need to write to get it right?
As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.
But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?
Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)
you can check it via using javascript screen object :
screen.width
or you can do this with css
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://www.javascriptkit.com/howto/newtech3.shtml
I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
And then you could add CSS:
/* On smaller resolutions, hide the text for Large screens */
#media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
#media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
I hope this works out fine :)
You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:
<div id="mydiv">...</div>
<style type="text/css">
#media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Or for better readability: Make it hidden on default and visible if max-width: 960px.
I could be wrong, but I think css selection by resolution would need a little help from javascript.
Here is a quick example of what that js could look like, embedded in jquery:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Hope that helps.
You can add jQuery function to change style dynamically as per scree resolution.
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
Answere was helpful from:
if screen resolution is less than x append css
You can do this entirely with CSS 3 using the #media command.
**#media (max-width:960px) { css... } //nothing with screen size bigger than 960px
#media (min-width:960px) { css... } //nothing with screen size smaller than 960px**
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though).
You can as well do screen or device edit
#media screen { .nomobile { display: block; } } //desktops/laptops
#media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.