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.
Related
I have a three-column website that is coded as a single column (responsive) up to 767 px. I want to set a 3 column view beginning for devices from (including) 768px.
I already have this working partially, but I need a smaller font size for devices beginning from 768 px.
Currently I have the following HTML code:
#media screen and (max-width: 767px) {
.wrap {
display: block;
}
.tc {
display: block;
width: auto;
border: none;
}
And other HTML code within this code.
The above makes a single column display for devices up to 767px.
I want to know what to write for viewport sizes above 767px which then starts with the Apple iPad, which is 768px default portrait size, and then higher px? I already have following code for max-width declared to up to 1240px.
What is the HTML/CSS code for devices 768px and above?
You can use a media query with min-width instead like this:
#media screen and (min-width: 768px) {
// your css here
}
Hi am trying to apply the css when screen resolution is 1280*720 its not applied but when I manually enter width and height in google responsive check its working . Here is code of css
#media (min-height:720px) and (min-width: 1280px) {
.space
{
margin-top:24.5%;
}
}
You want it from 720px to 1280px then you have to use media query min-width:720px (i.e. from 720px) to max-width:1280px (i.e. less then 1280px) as below,
div {
width: 100px;
height: 100px;
background: #111;
}
#media screen and (min-width: 720px) and (max-width: 1280px) {
div {
background: red;
}
}
<div></div>
Scale your browser and see div background change.
On desktop systems, the size considered by media queries like min-height is the size of the content area of the browser, not the resolution of the screen. A system with a 1280x720 screen will not use rules in this media query unless the browser is in in full-screen mode, since some of the screen is being used for the browser toolbar and scrollbar, window decorations, a taskbar (on Windows) or menubar (on macOS), etc.
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.
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;
}
}
I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.
For Eg: This is my normal body css rule
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
and when i want to change this css rule to target a devices whose width falls in the range of 150px and 600px i add this particular media query.
#media only screen and (min-width:150px) and (max-width:600px){
#body {
margin: 0 auto;
width: 90%;
clear: both;
}
}
Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.
How do i know what media queries to write for different zooming levels or to put another way whats the relation between browser zooming levels and pixel width.
After a lot searching. I found my answer.
-
We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.
For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini.
therefore you can target both Ipad mini and browser zooming(#175%) by using a common media query
i.e #media screen and (min-width:732px)
So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.
I solved like that (.scss)
#media only screen and (min-height: 500px) and (max-height: 800px) and
(min-width: 600px) {
margin-top: 0px;
}