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.
Related
Trying to develop a webpage with jsps and some css.
Encountered a problem with media queries.
#media screen and (min-width:500px) {
#first_area {
display: none;
}
}
This is the code that I typed on css file that is linked with my index.jsp.
But the section that is wrapped with div tag named id='first_area'
does not change (first area does not disappear) even when screen is smaller than 500px.
I am wondering if this is a problem with my code/ or media queries are only supposed to use with tags that already exists? (ex. div, span)
What I am trying to do is making the index.jsp page responsive.
Please help.
If you want to hide the div if the screen is smaller than 500px you should use max-width instead of min-width.
#media screen and (max-width:500px) {
#first_area {
display: none;
}
}
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
For the mobile version of my page there are white spaces in between the images that I can't seem to remove.
When I inspect the coding and toggle the min-height on and off it goes away:
#media only screen and (max-width: 1024px)
.edgtf-section.edgtf-parallax-section-holder:not(.edgtf-full-screen-height-touch), .touch .edgtf-parallax-section-holder.edgtf-parallax-section-holder-touch-disabled:not(.edgtf-full-screen-height-touch) {
height: auto !important;
min-height: 400px;
}
Website: Creationflame.com
min-height:initial;
This sets it back to what it was originally.
The initial CSS keyword applies the initial value of a property to an
element. It can be applied to any CSS property, including the CSS
shorthand all.
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'.
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.