I can use the following CSS to make something happen if the browser width is less than 800px.
#media only screen and (max-width : 800px)
{
#content
{
width: auto;
}
}
Is there a way to make some CSS happen to a certain element if the height of that specific element is greater than a certain value?
My goal is to have special CSS trigger if the contents of an elements starts to wrap because of too narrow browser width, without being dependent on a hard coded max-width.
More specific example
<h2>Long title followed by <span class="subtitle">a subtitle</span></h2>
.subtitle
{
margin-left: .7em;
font-size: .6em;
}
#media only screen and (max-width : 600px)
{
.subtitle
{
vertical-align: super;
&:before
{
content: '\A';
white-space: pre;
}
}
}
What I need is that the .subtitle should get vertical-align: super if it wraps to another line than the rest of the title. I currently do this manually when the browser shrinks to a certain width, but the problem is that some headers are longer than this and I'd like it to happen automatically whenever a header wraps, independent of the browser width.
Media queries unfortunately only work relative to screen size (and a few other screen based properties). What you require is something the lines of the proposed 'Element Query'.
This is a common problem in CSS. One solution is to detect a change in height on the container (the <h1> in your example). It would have to detect against a hard coded pixel value and when greater than that threshold toggle a class.
You have the added complication that the change in CSS you require will affect the height of the very container you are testing against, possibly creating a circular loop of test and change. This is one of the most difficult challenges of 'Queries on Elements'.
Related
I'm using Bootstrap 4 and noticing that I'm losing precious horizontal real estate at every breakpoint. I'd like for the outermost container to be 100% wide any time the browser is < 1200px.
I added this to my CSS:
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: 1140px;
}
}
I used 1140px as the width because that's what the documentation said the max width of an element with .contianer can be.
You can see it here.
When I resize the browser, everything adjusts as I intended, but is this just a case of getting lucky and that changing the width from Bootstrap's core values totally jacks up the grid? Is here a "correct" way to do this using .container-fluid?
Here is the exact solution of your question: https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap
When you are using Bootstrap 4, you should use it's basic features like media-breakpoints.
In the bootstrap_config and _variables you can specify the point of each breakpoint at how wide the screen should be to trigger it.
NOTE: in this case, the lg stands for your own choise wich breakpoint you want to give the value 1200px
In this case if you config your boostrap to trigger the lg classes at 1200px, then if you add the following code, on every screen which is less wide than 1200px, the container class will be 100% in width.
#include media-breakpoint-down(lg){
.container{
width: 100%;
max-width: 1140px;
}
}
So you basically want your container to behave the same way as .container-fluid when your viewport is less than 1200px. I think Patrik's answer is the most correct way to do this (by modifying the source file), but if you don't want to do that, then I think your method is OK.
However, I think the CSS you are using in your ruleset could be revised. You could set the max-width property to none which is the default value for that property. This has the effect of unsetting whatever Bootstrap's CSS applies for this property.
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: none;
}
}
MDN article showing none as the default value for max-width:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values
New to this, be nice :) (and pardon the sloppy code) I did search and already have found help here. Been helping redo an ebay store at work. Trying to get this media query to work with flexbox. From what I understand, a media query can't be used inline, but can be used inside style tags inside the head without having to link to external css.
here's a codepen of the layout. I've even tested other media queries, (there is one in there now) and they work. But I want the flex items to wrap to the full 100% width once screen size is smaller, and it won't seem to work.
I know I'm targeting the right rule because it was tested without the query:
.flex-item {
width: 100%;
}
and it does what I want it to do...How come the background color query works inside the HTML, while the flex query does not?
I'm sure it's something dumb.
https://codepen.io/pmendola/pen/MXjwza
(i removed some of the code for simplicity - there are only a few flex rules in use, right at the top of the css)
This is a specificity issue. Media queries do not add specificity to a query, so
#media screen and (max-width: 480px) {
.flex-item { ...
and
.flex-item { ...
have equal importance. The result is that the one that is declared last in your stylesheet (style tag in this case) is used. The later declaration overrides the first one.
You can correct this by placing your media query rule further down in the styles than where the rule that isn't in a media query is declared. Think of it as your media specific styles overriding the defaults. As such they need to come later in the styles.
Adding the !important to the flex definition will fix this for you.
#media screen and (max-width: 480px) {
body {
background-color: yellow;
}
.flex-item {
width: 100% !important;
margin: 0 auto;
}
}
what does this mean?
You need a more specific style that only is defined for mobile screens and is attached to the element. More Info
Make sure your .flex-item is not allowed to shrink
.flex-item {
width: 100%;
flex-shrink: 0;
}
The default behavior of the items in a flex container is to shrink.
The flex-shrink property changes the shrink priority of the items,
by setting it to 0 that item will not shrink.
some days ago i saw a webside where the text (padding-left: 5%) glided to another position when i resized the window. normally the position is changed "hard" (means when i make the window 100px wider, the position is 5px more away from left), but there it really glides to this new position.
first i thought it would be a js library, so i tried deactivating javascript, but even after this it worked, so i think it must be css-based? has anybody a hint how can i make this too?
In order to do this with purely css you need to use media queries and css transitions.
Here is an example: jsfiddle (Try resizing the results pane quickly)
The key parts:
.gliding-text {
padding-left: 0px;
transition-duration: 1s;
}
#media (min-width: 200px) {
.gliding-text {
padding-left: 10px;
}
}
#media (min-width: 500px) {
.gliding-text {
padding-left: 100px;
}
}
The media queries act as breakpoints for when the transitions are applied. In the example I made the padding-left property is changed when the window is 200px-499px and then again when the window is 500px+. This triggers the padding-left property to change and the css transition is applied. This is a simple example of the technique you described.
Checkout media queries and css transitions
I have a document that is meant to display in an iframe. It needs to be displayed in 2 different sized iframes on my site, and I want to adjust the content accordingly.
In the the framed document, I have a div that's 570px wide. If the iframe is under 400px wide, I want this div to be 285px wide.
So, the CSS in this document has a media query:
#media screen and (max-width: 400px) {
.sub-form {
width: 285px !important;
}
}
But it only works if I include the "!important". Why is this?
Two possible reasons why you need to include !important are:
.sub-form {
width: 570px;
}
appears later on in your CSS file, or the wider width appears earlier but has higher specificity, ie
.some-div .sub-form {
width: 570px;
}
I'm sure there could be other reasons as well.
I'm looking into the whole responsive design thing and finding fluid grids great for that - the only problem is they seem to break when I try to give a fixed width to any column. As you shrink the screen, the columns pop out of float. I'd have expected a fluid column with a percentage width (or no width) just to shrink, leaving the fixed width columns in place. How easy is it to create a hybrid fluid/fixed grid like this? I've seen one solution with inline-block instead of floated blocks, but how good is that across browsers, and is it a clean way of doing things?
Here's an example of the problem: http://jsfiddle.net/andfinally/nJ97q/2/
Thanks!
Fred
Set min-width on the wrapper div to the minimum width of the two fixed columns + a little for the next column. This makes it so it doesn't push.
#row { min-width: 400px; }
The one caveat is that it isn't supported by IE6 and below and can be buggy in IE7.
--------- EDIT -------------
What would work best for you in this situation I think would be a display: table-cell setup. This will allow everything to be locked to the positions that you are looking for.
.main {
padding: 10px;
background: #efefef;
display: table-cell; //this locks to #sideNav
}
#sideNav {
display: table-cell; //this wraps the sidebar and middle and locks to main
width: 280px;
verticle-align: top;
}
.middle {
display: table-cell; //this locks with .sidebar
width: 140px;
padding: 10px;
background: #bbb;
}
.sidebar {
display: table-cell; //this locks with .middle
width: 100px;
padding: 10px;
background: #555;
}
http://jsfiddle.net/nJ97q/73/
There's no clean way of doing this. But who needs clean?
I wouldn't reccomend mixing fixed and fluid widths, but if you are, you might need media queries (plenty of polyfills available for IE). You could then check if the container is smaller than X in which case you rearrange the layout (1/3 for all columns or just everything vertical etc).
The example is a little strange though. What's in all the white space in the middle? Which is the content?
PS. Don't use min-width. That invalidates the whole responsiveness.
I'm wondering why just not to use tables?
Like:
<table class="row">
<tr>
<td class="main">
</td>
<td class="middle">
</td>
<td class="sidebar">
</td>
</tr>
</table>
It become very simple using table layout, there is no JS, same column height, full compatibility with any browser.
Here is the example: http://jsfiddle.net/nJ97q/162/
I know everybody says that using tables is bad practice, but it really solves all this issues.
I think the solution below can probably help you.
Since you are giving the "row" div width in percentage, its resizing itself every time you shrink the window. Give it a width in pixels if you can, if you can't then use min-width so that it will not re-size below min-width and thus your panel will remain intact.
To make it smooth:
You can add javascript to make it smooth. Use window.onresize event to call a function which includes code to make "row" resize slowly by using timed function which increases width of the "row" by 10 pixel or so every 10 miliseconds till the max-length, in this case the window's length is reached. But you can effectively do this if you set the width in pixels, or else an ugly zoom-out, zoom-in effect will be produced.
Hope that helps,
Ashwin
I had a similar issue where I needed to have a fixed width left column (menu structure) but have the right column resize responsively as the browser was reduced.
I ended up implementing a few extra media queries (they already existed to handle other edge cases) and finding the percentage width of the right column that worked for that media query. This does "jump" slightly (I only used 2 "extra" media queries over the standard handheld/tablet/desktop ones) but at all resolutions in between it will not break to the next line. In effect you are adjusting the context in each media query before it can break. More media queries would equal smoother breaks as the browser is resized.
I am ok with the jumps because I am not building for the use case of someone resizing their browser, but rather to make sure it works acceptably on different resolution devices.
One caveat, when figuring the percentage widths of the right column, the base width used is the width of the media query you are in, not the original full width. Also, you have to use min-width and use the size that works at the smallest resolution for each media query section.
/* 641+ */
#media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377 / 641 */
}
}
/* 725-768 */
#media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460 / 725 */
}
}
/* 769+ */
#media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504 / 768 */
}
}
/* 860-990 */
#media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595 / 860 */
}
}
/* 990+ */
#media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}