I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}
I'm using BXSlider and attempting to change the background of every even iteration of the slider. The problem is that a css sheet that I do not have access to is affecting all sliders on the page.
Context-
<div class="bx-wrapper">
<div class="bx-viewport">
<div class="bx-slider">
</div>
</div>
</div>
Bx-wrapper and Bx-viewport are added automatically via the bxslider library.
The css sheet (that I have no access to) has the background set to #fff-
.bx-wrapper .bx-viewport {
background: #fff;
}
I am changing the background of the slider with -
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
My main problem is that the original #fff takes precedence and I can only see the above css working when I un-check that style in dev tools. What do you all think the best way to ensure that the above css takes precedence?
It sounds like your style is just being overridden by the existing stylesheet, correct?
To give your style priority over the existing stylesheet, your CSS scoping should be as specific as possible and, if necessary, contain the !important property.
For example, instead of having...
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
... you might want to try...
html body .bx-wrapper .bx-viewport:nth-child(even){ /*or whatever the full scope path to your elements would be*/
background-color: rgb(245,245,245) !important;
}
I hope that's what you're looking for.
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.
https://github.com/marcj/css-element-queries
From a layout perspective, it is possible using modern techniques.
Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.
The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.
It uses the flex-basis CSS property and CSS Variables to create this effect.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Demo
Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.
Update 2021/22
As mentioned in other answers, container queries are coming. There is a full spec for it, and its usage is detailed on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
and there is a polyfill to get browsers that don't yet support it up to speed:
https://github.com/GoogleChromeLabs/container-query-polyfill
There is a nice little overview video of it here:
https://www.youtube.com/watch?v=gCNMyYr7F6w
This has now shipped to Chrome (05 September 2022)
https://caniuse.com/css-container-queries
A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!
This is currently not possible with CSS alone as #BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.
I created a container query (aka element query) polyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss
There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:
#element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
So what conditions are supported for responsive styles with EQCSS?
Weight Queries
min-width in px
min-width in %
max-width in px
max-width in %
Height Queries
min-height in px
min-height in %
max-height in px
max-height in %
Count Queries
min-characters
max-characters
min-lines
max-lines
min-children
max-children
Special Selectors
Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:
$this (the element(s) matching the query)
$parent (the parent element(s) of the element(s) matching the query)
$root (the root element of the document, <html>)
Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.
With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and
The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
#media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
#media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
The only other solution requires JS.
The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
#media (max-width: 1200px) {
/* your css for 600px container */
}
You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there's several polyfills that can help you with that).
This API allows you to attach an event listener when resizing a DOM element.
Demo 1 - Demo 2
I was also thinking of media queries, but then I found this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div> with a percentage value for padding-bottom, like this:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
<div></div>
It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).
This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.
It's enough for my needs. Which might be enough for your needs too.
For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
So I have an external script(a chatterbox one) hosted on another website. It's positioned to the right of my list with float:right. The problem I have is that when the browser window resizes, it overflows onto the list. I have tried overflow:hidden; but that doesn't work.This is what happens when the browser window overflows.
This is how it normally looks.
Try using a CSS media query, like this:
#media (max-width:600px) {
#chat-box {
display: none;
}
}
This can be read as:
If the screen is less than 600px wide, hide the element with the id chat-box.
Place this in a style tag or in a .css file.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Try using a CSS important, like this:
overflow: hidden !important;
How to make cross size and cross browser compatible
print CSS for World's most use
paper sizes to get print?
A4, A3, Legal etc
How we can same almost similar
formatting to our site page's like
MS word ? What are best practices to
get consistency in formatting of
print page from any popular
browsers?
How to set cross browser margin and
font-size with consistency for all
like MS word does?
Is css font-size unit em best
for both screen and print? or we should use pt or px in print css? and i saw first time here new css property body {width: 7in}.
Can we set different CSS (with or
without help of JavaScript) for
color and B&W print (if i want to give different light color to save ink in B&W print?
Should we give fixed width to print
css if we are making fluid site for
screen to get print on paper (which
has fixed width)?
What about this? any suggestion?
body {margin: 15px; }
#mainContainer {width: 842px; /* equivalent to A4 */ margin: 0; }
#header {display: none; }
form {display: none!important; }
#footer {display: none; }
#mainContent #leftCol {display: none; }
#mainContent #rightCol {display: none; }
#mainContent #contentSection {float: none; padding: 0; margin: 0; font-size: 13px; width: 100%; }
You can specify print-only stylesheets using <link rel="stylsheet" type="text/css" media="print" href="print.css">
The user has to specify the page size in their print dialog. You were able to suggest the page's orientation in CSS2 using #page but it was dropped in 2.1. See here and here for excellent introductions into print stylesheets.
The usual quirks apply, like differences in the box model. The only best practice that comes to mind is keep it simple, don't use position: absolute, and test a lot. Install a PDF printing driver for testing.
You should be able to specify those in your print stylesheet.
Using pt, being a physical unit, should produce consistent results on every machine.
No. You will have to have the user pick the right stylesheet beforehand.
If you don't want your printout to consist of five pages next to each other, probably yes. However, you would only do that in your print stylesheet.
Remember that in the default settings, all browsers will print a proprietary header and footer that only the user can remove in their print dialog.
If you want total control over every inch of your print product - including size and orientation - you will need to start generating PDFs.