Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
Related
I'm creating a page where I have a parent div which encapsulates multiple child divs from different components in a NextJs project.
I have a preview option where my customers can preview their changes in mobile and desktop view.
I'm able to switch to mobile view using iframe. I want to achieve this without using an iframe.
Even though I change the parent div max width, because the rest of components have sm md lg xl which are taking the values from the view port instead of the parent div I'm unable to solve it.
What should be the approach to solve this?
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to give an attribute to the last of them [&>div:last-child]:bg-blue-500 , if you want to make it responsive, max-md:[&>div:last-child]:bg-blue-500 you have to express. I have prepared a demo for you to make it more meaningful, you can check it from the link below. If you expand the preview screen on the right a little, you will see that the colors have disappeared. I hope it can solve your problem.
Demo Code
Not sure what you meant complelty
<div class="max-w-full sm:max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
For small screen sizes
</div>
<div class="flex-sm-row sm:flex-row md:flex-col lg:flex-col xl:flex-col">
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
</div>
<div class="hidden sm:hidden md:block lg:block xl:block">
For large and extra-large screen sizes.
</div>
</div>
Media breakpoints allows you to change content appearance based on viewport size. Tailwind's media variants like md:, lg: etc based on them. In order to change content based on parent's size you should use CSS Container Queries. Be aware - they are not production ready - about 75% browser support (actual at December 2022)
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics.
Tailwind has official plugin which may help you with it. Install it configure within tailwind.config.js
module.exports = {
plugins: [
require('#tailwindcss/container-queries'),
],
}
You need to add #container class to a parent container and use size modifiers on element you need like #md:bg-blue-500.
<div class="#container max-w-full resize-x overflow-auto">
<div class="p-16 #md:bg-blue-500 bg-amber-400">
Resize me
</div>
</div>
This way element should be yellow unless container size is bigger than 28rem and it will become blue no matter viewport size
Produced CSS is
#container (min-width: 28rem) {
.\#md\:bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
}
Check other modifiers here. Please note md:flex and #md:flex are different sizes which may confuse at first
#containers supports labels so you can name containers and specify different CSS for them. Let's say you have reusable component (common situation) you include within loop
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
</div>
So within #container/aside element your card will be red after #4xl (56rem) size, while within #container/primary - yellow after #3xl (48rem).
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
YELLOW
</div>
</div>
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
RED
</div>
</div>
As I said it's not production ready. The way you want to handle unsupported browsers is up to you. First one - use polyfill. Just add
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill#1/dist/container-query-polyfill.modern.js"></script>
and it should be enough. However read full docs to improve user experience. I didn't fully tested it myself so cannot guarantee it is 100% solution
Second way is to check does browser supports container queries or not. You can check it via JS
if (!("container" in document.documentElement.style)) {
console.log('No support')
// Do something in that case
}
Another way - via CSS #supports rule
#supports (container-type:inline-size) {
/** Container queries supported */
}
Tailwind has supports: variant for that needs so something like this would work
<div class="supports-[container-type:inline-size]:hidden">
Your browser does not support container queries
Maybe show iframe element as backup (?)
</div>
<div class="supports-[container-type:inline-size]:block hidden">
Here is my cool feature which will be hidden if browser does not supports container queries
</div>
I've created this demo playground without polyfill to check different cases depends on container and window size plus different types of container and browser support
A solution to this can be adding a w-screen to parent div.
Use w-screen to make an element span the entire width of the viewport.
Documentation
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */