I have div element:
<div class="...">...</div>
So when window will be sized to min width and style hidden-xs apply, I need to add few more classes to my div.
After window sizing it should be:
<div class="... margin-top padding-top">...</div>
How to add these condition in to css?
p.s. Maybe it is possible to do directly in html by Angularjs?
You can't dynamically add/remove classes in CSS.
What you could do is dynamically add/reset styles, with #media queries.
Let's say all targeted elements have a class called .target-el.
All you have to do is:
set .target-el.margin-top rules for both small and large sizes.
do the same for .target-el.padding-top.
instead of removing a class, set the rule to auto, none, 0 according to the default value for that rule.
I've set the class .margin-top along with a target marker class .target-el so you could still have your default .margin-class working properly elsewhere in your code.
Here's an example:
.target-el {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
}
.target-el.margin-top {
margin-top: 0;
}
.target-el.padding-top {
padding-top: 0;
}
#media screen and (max-width: 700px) {
.target-el.margin-top {
margin-top: 10px;
}
.target-el.padding-top {
padding-top: 5px;
}
}
<div class="target-el padding-top margin-top"></div>
From Bootstrap code, the .hidden-xs code is the following:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
It uses a media query to be applied (screen > 767px). Instead of manipulating the DOM with JavaScript, I would suggest to use the same media-query on your classes:
<div class="... margin-top padding-top">...</div>
#media (max-width: 767px) {
.margin-top {
margin-top: 10px;
}
.padding-top {
padding-top: 10px;
}
}
I don't see a need for js likely, I would create new css for it:
<div class="hidden-xs margin-top-xs padding-top-xs">...</div>
use a media query css selector:
#media (max-width: 767px) {
.margin-top-xs {
...
}
.margin-padding-xs {
...
}
}
You can try to implement it with CSS specificity. Something like either of the following:
#MyDiv1.hidden-xs,
#MyDiv2 .hidden-xs{
margin-top: 10px;
padding-top: 10px;
}
<div id="MyDiv1" class="hidden-xs">
</div>
<div id="MyDiv2">
<div class="hidden-xs"></div>
</div>
stead implement it with CSS 'specificity'. Something like:
In order to add custom classes depending on a media query, you can use javascript.
This can be done with window.matchMedia, or by using a library like Enquire.js.
If you don't want to look for the media query that was specified in the bootstrap framework you could also use an [attribute*=value] selector to detect all the classes that contain the "-xs" characters, and depending on that to add custom properties for the rest of classes.
div[class*="-xs"].margin_top {
margin-top: 10px;
}
<div class="hidden-xs margin_top">The first div element.</div>
<div class="visible-xs margin_top">The second div element.</div>
Related
Lets you say you have two media queries on an element that both match. How do you know which one wins?
For example, let's say you have a media query that sets a rectangle to be red at LESS than or equal to 500 pixels and you a media query that makes it blue at MORE than or EQUAL to 500 pixels. Which one wins? And let's say you have a phone that is 500 pixels wide.
hr {
width: 400px;
left: 10px;
top: 0;
position: absolute;
}
.rect {
left: 10px;
position: absolute;
top: 20px;
right: 10px;
}
#media (max-width: 400px) {
.rect {
background-color: lightgray;
}
}
/* larger content */
#media (min-width: 400px) {
.rect {
background-color: lightblue;
}
}
<div class="rect">
Here is a div
</div>
<hr width="500px">
I would like to setup proper media break points. Do I need to rewrite them? Should they be min-width 501px and so on?
Normally it's the style declaration that comes last in the code that "wins" (is applied!). You can set !important on a style declaration, but IMHO that is toss-up and sometimes doesn't work. I 'think' id styles will have more importance over class styles, but I do know you can set multiple class name styles more influential.
Code not tested:
#less_important {
background : green;
width : 50px;
height : 50px;
}
.blue {
background : blue;
width : 50px;
height : 50px;
}
.red {
background : red;
border : 1px solid yellow;
}
<html>
<div id = "less_important" class = "blue">
</div>
<div class = "blue red">
</div>
<div class = "red blue">
</div>
</html>
Move the style .red and .blue in the code and see what happens to understand
CSS mean Cascading Style Sheets.
Definition of cascade:
"Something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding."
So, whatever comes after in the cascade will overwrite the previous.
Yes, you should set the one with min-width to 401.
So, I basically want to have 2 different layouts for a page on my website.
For under 400px:
[image]
description
[image]
description
For above 400px:
[image] description
[image] description
(so, the image and the text are on the same line)
I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?
Thanks!
Here is a snippet
/*screen width over 400px*/
#media (min-width: 401px){
img {
width:50px;
height:50px;
}
p{
display:inline;
}
}
/*screen upto 400px*/
#media (max-width: 400px){
img {
width:100px;
height:100px;
}
}
<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>
Alright your going to have to use media queries. Here are a few examples that I wrote.
A media query is a set of styles(styles that you set)that has a certain screen size condition.
When this screen size condition is met the styles given inside the media query override any other styles that contradict the styles outside the media query.
Here is an example
#media (max-width: 500px) {
#visible {
display: none;
}
}
<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>
Here is the basic syntax of media queries
First make the #media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width. Then, add the styles inside the media query.(Dont forget to close the media query!)
#media (max-width: 1000px) {
h1 {
display: none;
}
#hidden {
display: block;
}
}
p {
display: none;
}
<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>
Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.
Here is a tutorial on media queries Media Queries
What you're looking for are css media queries. Check this page for an in-depth explanation http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Alternatively, in your case it looks like you simply want to wrap the descriptions on to the next line when the viewport becomes too narrow. If this is the case then there's no need to add in extra markup because you can just leverage the natural behavior of inline-block elements. This link will clarify the behavior of inline-block elements for you http://www.w3schools.com/css/css_inline-block.asp.
I would go this way, using a row structure.
It will give you some more options down the road, when/if you maybe want 3 img/text lined up, or ... and so on, sooner or later maybe a header, maybe a footer.
.header {
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
}
.container .row.at-top span {
vertical-align: top;
}
#media (max-width: 400px){
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="row">
Header
</div>
</div>
<div class="container">
<div class="row at-top">
<img src="http://lorempixel.com/200/100/sports" />
<span> Some text ... being aligned at top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/200/100/city" />
<span> Some text ... or at bottom</span>
</div>
</div>
Ok, so I'm using Bootstrap 3 for one of my websites.
Everything works great, but there's something wrong with the #media query to define some css for smaller devices.
So I've included all the necessary files of bootstrap (first the bootstrap css & then my own, the js,...)
In my css I have for example:
#media (max-width: 768px) {
.md-only {
display:none;
}
.item-left {
padding:0px;
}
}
.item-left {
padding:10px;
}
So what now happens is that when I add class="md-only" in my html the div (for example) doesn't show up on devices < 768px. However, the div with class="item-left" still uses the padding:10px and not the padding:0px as defined in the #media query. So it takes one css class, but not the rest.
I don't get what I'm doing wrong...
The problem is the order of your rules.
Try placing the .item-left before the #media.
.item-left{padding:10px;}
#media screen and (max-width: 768px){
.md-only{display:none;}
.item-left{padding:0px;}
}
<div class="md-only"></div>
<div class="item-left">qweqwe</div>
Make sure you are not overriding your styles. As you can see in your example, you've added the class .item-left a second time after defining it in the media query earlier thus making it obsolete.
.item-left {
padding: 10px;
}
#media (max-width: 768px) {
.md-only {
display: none;
}
.item-left {
padding: 0px;
}
}
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I have an HTML snippet like below:
<div class="status">
<div class="status-icon green">
Online
</div>
</div>
and related css:
.status {
width: 100px;
}
.status-icon {
display: none;
}
My question is:
How can I write a css rule when .status{width=150px} then .status-icon{display: block;}?
Or is there a selector to target specific css rules like attribute selectors?
You cannot write a CSS rule where a property is set depending on whether the value of another property satisfies some condition. This seems to be what you are asking, even though you refer to CSS attributes. (There are no attributes in CSS; there are attribute selectors, but they refer to HTML or XML attributes.)
CSS as currently defined is simply a style sheet language with no programming features (or, let us say, with very limited programming-like features).
If you define status as a percentage (instead of fixed pixels) then you can do this with media queries
like so:
FIDDLE
.status {
width: 20%;
height: 100px;
background: blue;
}
.status-icon {
display: none;
color: white;
}
/* 20% of 750px = 150px */
#media (min-width: 750px) {
.status-icon
{
display: block;
}
}
So now when the viewport width hits 750px+ the status element will be 150px wide and with the media media query we can set .status-icon to block