This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<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;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!
Related
I have two adjacent divs. One has only a single header ("MENU"). The second one is a simple table of contents. I want to show the table of contents iff user's screen width is >= 800px. In any other situation, the MENU div is hidden and table of contents is visible by default.
In order to show/hide table of contents based on screen size I use:
#media screen and (max-width: 800px) {
#tableOfContents { display: none; }
#menuSign { display: block}
I figured out how to show the table of contents when user hovers over MENU sign but I have no idea how to make it stay visible when the cursor moves from one div to the other.
#menuSign:hover + #tableOfContents {
display: block;
background: #f00;
cursor: default;
background-color: darkgray;
color: white;
}
Sorry if the answer to my question is obvious- I'm completely new to web development. All answers to similar problems either used JS (which I cannot do) or did't explain how to make table of contents persist on the screen.
If the divs have no empty space between them and the cursor can flow seamlessly from one to the other, you might try to change the selector into:
#menuSign:hover + #tableOfContents, #tableOfContents:hover { display: block; }
Also, as a personal suggestion, you should try never to use IDs in your CSS, it's bad practice: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4
Moreover, if you are attempting to create a simple hamburger navigation menu, it's better to show the menu itself when the user clicks on the button instead of just hovering over it, for consistency with devices that don't have the hover functionality like mobile phones. This can be achieved in a number of different ways, the simplest involving some very simple JavaScript (or jQuery, for the simpler syntax) to add or remove a class on the DOM parent of the elements you are attempting to style now, or with hacks like using a checkbox as a proxy for the menu button.
I have my example setup in this codepen.
Im trying to print a dynamic amount of images in a grid in a way that things don't get cut off at the bottom of each page. usings page-break-before seems like the easiest way to do things.
So every 5 cols I insert a break item
<div class="page-break"></div>
and the following css
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
But this seems to have no effect. I can't find anywhere that explicitly states it, but since this attribute does not work with floating elements, I'm assuming it wont work with flexbox either.
How else can I achieve what I'm looking for:
Being able to create a grid 5 columns wide dynamically, from an unknown number of items, that will work with the page-break attribute.
I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.
Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.
#media (max-width: 600px) {
.banner {
display: none;
}
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Now as you run the code above(I assume you just did) there is nothing wrong.
Ok, now I will add similar code.
#media (max-width: 600px) {
.banner {
display: none;
}
}
.banner {
display: block;
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.
If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.
(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query.
.banner {
display: block;
}
So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.
Solutions:
1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:
#media (min-width: 601px) {
.banner {
display: block;
}
}
2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.
EDIT:
As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.
It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.
In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.
What i'm going to query here is close to a question but i really hope that it can help many other people with a similar question.
I've been looking for some resources online for best responsive design but it's difficult to get a strong defining answer so it might be nice to receive different peoples methods and opinions.
I've been using media queriers a lot for the responsive design as well as Bootstraps grid system which helps making things responsive.
Now sometimes i've found that allowing the grid to control your elements responsively isn't effective for mobile devices in fact sometimes i feel that the content requires an entirely different approach which is where i end up doing something like this:
#media (max-width: 991px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media (min-width: 992px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}
With some HTML to go with it like this:
<div class="desktop">
... approach 1 displays only on desktop ...
</div>
<div class="mobile">
... approach 2 displays only on mobile ...
</div>
I don't know if this is a good way to do it when the designs require different layouts or styles for a mobile design especially with sometimes with backgrounds and breaking out of the grid that you can't simply break to columns to stack because of some of the web content in the background.
I know you can also do things such as m.domainname.com for mobile sites but to me this feels like moving to an extreme level especially when most of the site works responsively but some sections don't. What ways are significant for doing this? especially when you are working within a grid.