I need my html file work on html email, so I set inline CSS for my code and I still need it can dynamic changes when device is mobile or desktop.
Here is some code what I try:
<html lang="en">
<style>
#media (min-width: 1024px) {
.separate {
width: 50%;
}
}
</style>
<body>
<div
class="separate-container"
style="display: flex; justify-content: center; align-items: center;"
>
<div
class="separate"
style="width: 96%; height: 1px; background-color: #757575; opacity: 20%;}"
>
</div>
</div>
</body>
</html>
I want the <div class="separate" /> width is 96% for mobile, 50% for desktop.
But in the result my separate is always 96%.
Is it possible dynamic changes when using inline CSS ?
Inline style won't help you switch the styles with conditions
because you have applied class and also specifically applied in style tag, instead do this
<html lang="en">
<style>
.separate {
width: 96%
}
#media (min-width: 1024px) {
.separate {
width: 50%;
}
}
</style>
<body>
<div
class="separate-container"
style="display: flex; justify-content: center; align-items: center;"
>
<div
class="separate"
style="height: 1px; background-color: #757575; opacity: 20%;}">
</div>
</div>
</body>
</html>
removed width from inline style and applied in class. Now your css can switch between media query : 50% and the default one : 96 %.
CSS works with specificity. In your case, inline will always be prevalent over everything.
I can't think of a way to make it work without using two media queries or using !important like this:
<style>
#media (min-width: 1024px) {
.separate {
width: 50% !important; // This will override any `style`
}
}
</style>
The documentation clearly states:
Inline styles [...] always overwrite any normal styles in author stylesheets. [...] The only way to override inline styles is by using !important.
Related
I looked on every thread and I tried every possible solution to no avail. It just doesn't work on any browser...
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="bg">
</div>
</body>
CSS:
#media only screen and (max-width: 1200){
.bg{
background-color: green;
}
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg{
background-color: black;
height: 100vh;
}
Any suggestions?
You have 2 problems that are preventing it from working:
You need to specify the unit (e.g. px) in the (max-width: 1200px) - otherwise it doesn't recognise the breakpoint
You need to include the media query after the default css for .bg. Because you are including the media query before .bg{background-color: black;...}, this is overriding the CSS rule in the media query that set is to green.
See this in a working snippet (Click "Expand Snippet" to see it in fullscreen with a black background):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg {
background-color: black;
height: 100vh;
}
#media only screen and (max-width: 1200px) {
.bg {
background-color: green;
}
}
<div class="bg">
</div>
You should be using min-width in your media queries and apply them using mobile first approach. It means first you apply default styles which will apply to any screen if there are no media queries. Then you reset styles for larger screen sizes. The default styles then only apply to smaller screens.
Example:
/* Default style */
.sample-class {
color: #ff0000;
}
/* Reset style for screen sizes that are 768px or higher */
#media screen and (min-width: 768px) {
.sample-class {
color: #777777;
}
}
Do make sure that you are implementing styles in the order above.
I am using the CSS #media property to hide a div when the page is 900px or less in width. It works the first because when I resize the page to less than 901px the div disappears, but when I return the page to its normal size, the div remains hidden. Here is the code:
<style>
.mydiv {
display:block
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
What do I have to do to make the div reappear after the size returns to normal?
Try:
<style>
.mydiv {
display: block;
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
Maybe you have a style interfering somewhere, you may want to look at the inspector to see which styles are being applied.
(open the snippet in expanded mode to test it)
.hide-me {
width: 200px;
height: 50px;
background: green; /* visible */
}
/* This has to come last */
#media only screen and (max-width: 900px) {
.hide-me {
background: red; /* hidden */
}
}
<div class="hide-me"></div>
I actually fixed it by using visibility: hidden instead of using display: none. I don't know if this is a consistent fix, but it worked for me
My classmates and I are trying to figure how to make this code be completely mobile friendly. We tried using #media screen but it did not work. We want to make this happen with HTML and CSS.
HTML
<!--List Content Start-->
<div class="listcontent">
<div class="listnumber">1</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
<br><br>
<!-- List Content End-->
<div class="listcontent">
<div class="listnumber">2</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
</div>
CSS
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent {
width: 500px;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding:5px;
}
.listnumber {
width: 50px;
height: 50px;
float: left;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
}
.listtitle {
width: 425px;
height: 50px;
padding: 5px;
float: right;
background-color: #fff;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Here is the fix I created for you in terms of your coding snippet: JSFiddle
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent:first-child {
margin-bottom: 40px;
}
.listcontent {
max-width: 500px;
min-width: 320px;
width: 100%;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding: 0;
}
.titlewrapper {
width: 100%;
}
.listnumber, .listtitle {
display: inline-block;
}
.listnumber {
width: 50px;
height: 50px;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.listtitle {
height: 50px;
line-height: 50px;
padding: 5px;
background-color: #fff;
white-space: nowrap;
width: calc(100% - 70px);
max-width: 100%;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
<div>
<!--List Content Start-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">1</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
<!-- List Content End-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">2</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
</div>
Ok so let's dive in, what are the reason for all these CSS and HTML changes?
To make something mobile responsive you need to consider the behavior it needs to have. When it comes to element widths, a general rule of thumb is the following.
CSS code example:
.some-wrapper-element {
width: 100%;
min-width: 320px;
max-width: 100%;
}
This makes a wrapping element, such as your .listcontent to become responsive with and without media queries being used. Note how I applied this throughout the CSS to give elements which needed to resize as the page resized, a dynamic width.
Your HTML layout needed a little more thought behind it. You are trying to horizontally align two elements and make them responsive. I will admit this is not a straight forward and easy to implement solution, but there are standard things to look at:
A wrapping element to ensure horizontal alignment occurs.
A CSS rule to keep the elements in line, such as display: inline-block or float: left, or a combination... the implementation depends on what works for you.
The elements to be horizontally aligned and made responsive, need to fit next to each other. This is important and it is the reason for all the added CSS code. See a very good reference here: How to place two divs side by side where one sized to fit and other takes up remaining space?
Media queries..., my rule of thumb is: does x element need to change responsively in a way which cannot be done with CSS styling first? Such as hiding/showing an image on certain screen widths, then your answer is yes please. Otherwise think of our layout first, how to make it responsive first and last how to use media queries for the things you cannot make responsive.
The <div style="clear:both;" /> code that was put there. That exists only to help separate your title section from your image section. It is another layout sugar I put there for you, because it will help keep things in place and separate content that does not need to be mixed. Awesome right!
line-height: 55px; This is simple: if you have text inside a small element (like the one you have) and you want it to look well, center it using line-height that is equal to the element's height. I did this just because I thought it looks nice, but change it if you think it is unnecessary.
Anyways, I hope this helps let me know if you have any questions.
The listcontainer should have the fixed width, while the listcontent fill them by 100%. All you have to do then is just fill the media querys like this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
.listcontainer {
width: 100%;
height: 100%;
}
}
This way the site will have a fixed width for desktop usage, once the browser is too small to display the entire page (in this case 1024px but that depends on the page - in your example probably 500px) it will go to 100% dynamically, which is the most common approach. I can't tell you all of the media querys, since it depends on the developer to decide what the bevahiour should look like.
If you want to have a really mobile friendly site I recommend you using a framework like bootstrap - it does most of the job for you and you'll learn exactly how media querys are working and how you are supposed to use them properly.
I've been trying to write some simple media queries, but I was stuck right after I started. It seems like media queries only work on text and not on divs and images.
This is my css code along with the html.
#media (max-width: 720px) {
.logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
<!-- only this piece of query works --> .text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png"></img>
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif"></img>
</div>
</center>
Acording to this code image should strech to 100% of the window width right after window size comes under 720px and gif which float to the left of the text should clear its float and go under the image. But nothing happens, except text gets a red border.
I've tried some different formats of media queries, #media () {}, #media screen () {}, #media only screen () {}, #media screen and () {}, #media only screen and () {} but none of these seem to work for images and divs.
Here is my whole code:
http://pastebin.com/0bvUrZnU
OK so your media queries are not great.
Firstly lets change media to : #media handheld,screen and (max-width: 720px)
This will allow your query to be read across the board by DPI changes resolution changes it will even work in things like iframes and pretender box's and emulators it all basically.
Now also as a rule of thumb your media queries should be at the bottom of your style sheet. We do this because style sheets are read from top to bottom so all overriding styles should go underneath original style rule's.
so you want this :
You were missing a . before text and also use float:none; when canceling a float.
I have also tidied up your html a little also with <img> tags always define the height and width withing the tag itself like so <img width="300" height="100" /> and then use css to override it. this is so the browser can render the image faster because it knows its proportion's & you should all ways have an alt attribute. finally images are not wrappers they do not need to end in </img> instead just finish it all off like this: <img width="300" height="100" alt="iam an image and if i wanted to be responsive i should have max-width:100%; height:auto; as my CSS rule." />
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
#media handheld,
screen and (max-width: 720px) {
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.text {
border-bottom: 2px solid red;
}
.gif {
float:none;
}
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png" alt="all images should have alts and use width and height" />
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif" alt="all images should have alts and use width and height" />
</div>
</center>
on your desktop code you target logo as an id #logo and in your media query you target it as a class .logo
It works as expected but you have some problem in code inside your media query. You are referring it as class instead of id
#media (max-width: 720px) {
/*this is id but you just referred it with .logo which isn't present*/
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
/*only this piece of query works*/
.text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
I had the same problem after css lint suggested to remove
* {
margin: 0;
padding: 0;
I replaced that and media queries worked again.
Most issues that I have come across with Media Queries not working as expected are due to the order they appear. Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.
When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).
When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).
I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:
In footer.tpl
<div id="footer">
<div class="column">
In stylesheet.css
#test {
#media screen and (max-width: 480px) { image display: none; }
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
Is there any way the link could also be removed? Thanks in advance.
Give your element a display:none; on the media query.
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
background: whitesmoke; /** Testing purposes **/
}
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
<div id="footer">
<div class="column">
Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Right now your media query looks invalid.
To hide the link, you could do this:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Note that this will override the display style of your #test element.
Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.