I'm using media queries in my css:
/* Tablet */
#media (max-width: 979px){
}
/* Phone */
#media (max-width: 767px){
}
When I drag my browser really small on my desktop computer it switches to the phone layout, is there a way to prevent this so the small size is only seen on the phone?
There isn't really a need to do this. This is the point of responsive, it's device-agnostic. So if a user comes to your site on desktop but their browser is really skinny the content will fit it (such as the Windows 8 Metro IE10 sidebar thing). You don't want to limit it only to phones, once you've done that you're going down a road that isn't meant to be traveled with responsive.
Sure you can, but the question is you really think the overkill need for it will be valid?
You can add a class to the HTML tag for phone devices (using JavaScript or any other method to verify if its a phone or not) and use this class inside the #media so only when this class is applied the media queries will take effect, small example:
HTML:
<html class="phone-device">
</html>
CSS:
/* Phone */
#media (max-width: 767px){
.phone-device{
}
}
But again this is not the right thing to do...
Related
Can we make our website fully responsive while using CSS, none of other thing should we use.
Yes, you can use media breakpoints in css as follows
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
for example
#media (max-width: 480px) {
.text {
font-size: 16px;
}
}
For more information, please visit the following link:
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
If you're looking at only using CSS for responsiveness, I would recommend reading up on media queries. They're like if functions for css.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/a-complete-guide-to-css-media-queries/
I have recently tried to make my website compatible with mobile devices, which unfortunately is more complicated than I wished.
I ended up using the following approach:
.mobile_device_480px {
display: none;
}
/* if mobile device max width 480px */
#media only screen and (max-device-width: 480px) {
.mobile_device_480px{display: block;}
.desktop {display: none;}
}
And then encasing all parts that needed to be show in a special way for phones in a mobile_device_480px div and everything else in a desktop div. This works perfectly fine for my android phone, running its native browser. However, on my iPhone running safari it displays both for mobile_device_480px and desktop.
To give an example, on mobile i want the following size of the text area
<textarea rows="3" cols="77" wrap="soft"> <\textarea>
and on a desktop I want a larger text area of
<textarea rows="15" cols="100" wrap="soft"> <\textarea>
This displays correctly on my computer and my android phone, but on my iPhone both areas show up, so it looks like it just ignores the display: none;
I am literally lost and have tried to work on this problem for several hours and don't really know where to start, if it is a problem with the code, operating system, browser etc.
Edit: The two phones are approximately equal in size.
Any and all help is much appreciated.
I suggest you to replace
#media only screen and (max-device-width: 480px) {
with
#media (max-width: 480px) {
Which will target every kind of device
I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!
http://tynesideelectrical.co.uk/
In this website displaying a phone number banner on header.
i need to display a 'click to call' image instead of this number banner while browsing from mobile device.
using with CSS.
Any hope. ?
Using CSS, you can embed images via the background-image property and then combine it with media queries to load different images on desktop and mobile.
/* For desktop */
#media (min-width: 721px) {
.header {
background-image: url('img/desktop.png');
}
}
/* For mobile */
#media (max-width: 720px) {
.header {
background-image: url('img/mobile.png');
}
}
Media Query's are your friend here!
You might want to look into:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
It checks the device/monitor, and according to that you change the styling.
Theoretically you can use simple
#media handheld {
/* rules for mobile phone */
}
#media screen {
/* rules for computers */
}
but (new) smartphones make a pretense of they are normal computers and will not react on handheld.
There's no exact way … you can only identify phone by smaller resolution (but seems that not for a long time)