We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Related
I need help about a very specific problem concerning some of my "media queries".
To make text readable on mobiles, I wrote this :
html{font-size: 100%}
for normal devices, and this :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){html{font-size: 190%;}}
for mobile users to be able to read a larger text.
I was really happy because it worked perfectly, and all the elements and texts displayed perfectly.
(Precision: all my font-size / and some of my paddings between elements are sized in "rem" unit.)
I had another div width some properties (but not font-size) on which I used media queries like this:
#media screen and (max-width: 700px){
.ftrsection{
float: none;
/* some other code */
}
The initial code of this div is :
.ftrsection{
float:left
}
but I decided to apply this media queries in other conditions, which are the same that for html{font-size: 190%} :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){
.ftrsection{
float: none;
/* some other code */
}
}
And I actually can't understand why, but when I apply that previous code, some of my texts are like twice bigger... Can someone help me please ? That's very anoying.
Thank you.
I am having a website already developed using Expression Engine. Currently if i open site on mobile phone or other device few sections cut off from the screen.
After debugging i found that i need to change height of DIV <div id="tabmiddle" style="height:1500px;"> in respect of device. I am very new to expression engine.
I am looking out something like
if (Mobile Device)
{
<div id="tabmiddle" style="height:2000px;">
}else if(Tab Device)
{
<div id="tabmiddle" style="height:1800px;">
}else
{
<div id="tabmiddle" style="height:1500px;">
}
Look into media queries.
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.
They allow you to apply specific styles based on the screen dimensions.
For example:
#media (max-width: 600px) {
#tabmiddle {
height: 1500px;
}
}
This will change the height of your element with tabmiddle as the ID to 1500 pixels high whenever the screen is smaller than 600 pixels; typically a mobile/tablet device.
You can use following two media rules to do this:
For Mobile devices (width<768px):
#media (max-width: 768px){
#tabmiddle{
height: 2000px;
}
}
For Tab devices (width<992px):
#media (max-width: 992px){
#tabmiddle{
height: 1800px;
}
}
If device width is 992px or more than that, it will follow your default CSS height written in style tag of tabmiddle element.
If I check HTML on 2 different Systems with different resolutions then the view is distorted.
Is there any way of calculating the screen width and height at run time?
I lack experience with CSS but did some research and found about media queries, but there they are suggesting different classes (if i am not wrong).
My question is it possible to get the height and width at run time and use only one css ?
something like :
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
Media queries is a good choice for your problem.
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
Have a look a below example:
/* For Mobile */
#media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
/* For Tablets */
#media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Actual dimensions can vary as per your case.
This is the same method many framework uses to implement responsiveness.
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
#media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
#media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
Nope. they are not suggesting different classes.
With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
I suggest you to follow a tutorial to start using media queries.
I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!
What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.
.div img {
float: left;
}
/*This will cause the img receive float none rule when screen is smaller than 768px*/
#media only screen and (max-width: 768px) {
.div img {
float: none;
}
}
There is a complete guide you can check out right here.
Using media queries should be what you need.
For example.
#media only screen and (max-width: 768px) {
.content {
float: none;
}
}
Basically that says if the screen size is less then 768px then the class content won't have any float.
What you are looking for is called MediaQueries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will need something like:
#media screen and (max-width: 400px){
yourelementselector {
... your CSS...
}
}
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes