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.
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
I have an instagram plugin installed, which i have put in the footer of my blog. on a desktop version, it is perfectly fine, however, on a mobile version, the screen is smaller and all the images align under each other, instead of 6 images next to each other as on desktop.
I would like to know, how can I make them 2 rows with 3 images on a mobile? where the 3 images together of each row take in 100% of the screen from left to right? with css?
I can't give you the full style css of the instagram plugin because it has a built-in css. But I can copy certain css element from the inspect element and put !important behind it. I just don't know how to do that.
you can see it here --> http://oihanevalbuenaredondo.be
EDIT
#media screen and (max-width:720px) {
#sb_instagram .sbi_col6 {
data-cols:3!important;
}
}
this is what i have now, it fixes that i got 3 images on each row, but the images arent square, and my images are cut, not resised
You would need to use a CSS #media query to target mobile, and add the following CSS:
#media (max-width: 640px) {
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
#sb_instagram.sbi_col_6 #sbi_images .sbi_item {
width: 33.33% !important;
}
#sb_instagram .sbi_photo img {
width: 100% !important;
display: inline-block !important;
}
#sb_instagram .sbi_photo {
height: 33vw !important;
overflow: hidden;
background: none !important;
}
}
Obviously you may or may not need to end up using !important for everything. Adding the above CSS results in the following:
Obviously I've swapped out your personal photos for placeholders, but the rest is your code.
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've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}