I'm having some trouble using a media query. It's quite a basic thing but for some reason is not working.
Basically, I have a border around a div tag:
<div class="container games mobile">
<div class="row">
<div class="col-lg-8 div border">
<!-- This div tags are closed at the end of the file -->
I'm using bootstrap and don't honestly know if that can be part of the problem but what I wanted to do was to remove that border whenever the user was in a mobile, and to do so, I added the following lines in my css file:
#media screen and (max-width: 600px) {
.border {
border: none;
}
}
Border on computer
Border on mobile even though I used the querie
(added a grey square on both prints because the content doesn't really need to be in here but a live preview can be found here)
Could the issue be parent>child related?
Thanks in advance!
It's not working because it's being overwritten by bootstrap code. Try this:
#media (max-width: 600px) {
.border {
border: none !important;
}
}
Use css specificity here instead using !important. why not !important?
#media screen and (max-width: 600px){
.games.mobile .border {
border: none;
}
}
Related
I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop:
Grow your
business
faster
, and in mobile, it must look like:
Grow your business
faster
I haven't been able to figure out the way to do this.
Can you give me a clue?
Thanks.
I have tried with word-break, but haven't been successful yet.
You can use a <br> tag in a <span> for which you set up a CSS rule and a media query showing/hiding it:
.a {
display: none;
}
#media screen and (min-width: 480px) {
.a {
display: inline;
}
}
<h1>Grow your <span class="a"><br></span>business<br>faster</h1>
Try This
<style>
#media screen and (max-width: 467px){
.newline{
display:block;
}
}
</style>
<p>Grow your <span class="newline">business</span></p>
The word-break property specifies how words should break when reaching the end of a line.
You could use a combination of HTML and CSS
#media screen and (max-width: 768px) {
#title span {
display: block;
}
}
<div id="title">
Grow your <span>business</span>
</div>
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>
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'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.
I want to show certain content if the user is on a mobile device, and hide it otherwise.
My first attempt looked like:
The CSS in the head:
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
}
}
The HTML:
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.
I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:
The CSS in the head:
.mobile {
display: none !important;
}
#media (max-width: 420px) and (min-width: 100px) {
#fix .mobile {
display:block !important;
}
}
The HTML:
<div id='fix'>
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
</div>
But that didn't work either. Seems like it would be a pretty common problem.
Any ideas how to get around this?
Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:
The CSS in the head:
.mobile {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
}
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
line-height: 1.5 !important;
max-height: none !important;
}
}
The HTML:
<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
I'm only visible on mobile :)
</div>
How about using:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
I wanted to have large pictures be hidden for mobile devices. Looking at this site I put the following styles in my css:
//medium+ screen sizes
#media (min-width:992px) {
.desktop {
display:block !important;
}
}
//small screen sizes
#media (max-width:991px) {
.mobile {
display:block !important;
}
.desktop {
display:none !important;
}
}
Then I apply the class in my html like this:
<img class="desktop" src="img/test/test.jpg"
alt="jhkjhjk" height="600" width="900">
But when I shrink my browser window the image remains there. Have I missed something?
Since you are using Boostrap, you can do it even easier.
Append a class of
visible-md
to your image.
md is for >992 px.
Check out the easy classes you can use
http://getbootstrap.com/css/#responsive-utilities
EDIT: probably wanna do visible-md visible-lg if you're gonna do visibles. The chart explains all the combinations.