I have three stylesheets: a persistent one, one for windows 800px or greater ("standard"), and one for windows smaller than 800px ("mobile"). My problem is that the standard style sheet is being recognized and applied, but when I resize the window to under 800px, the mobile sheet is ignored and I'm left with only the persistent style. I suspect it's a basic syntax error, but I haven't been able to find the problem.
<link rel="stylesheet" type="text/css" href="persistentstyle.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" title="standard" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" title="mobile" href="mobilestyle.css">
I already have the necessary meta tag in the header:
<meta name="viewport" content="width=device-width" />
Thanks!
May be you need this:-
<meta name="viewport" content="width=device-width">
Generally, the most common mistake is not including the meta tag required for CSS media queries to work:
<meta name="viewport" content="width=device-width">
This link explains the viewport meta tag, and additional properties you can assign to it, such as allowing the screen to be scaled, and more.
Related
I have modified my datatable to be editable but I ran into a display problem and it looked like below:
I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.
What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.
Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.
Try adding an important tag like this to your main css stylesheet to override your bootstrap.
.col-sm-12{width:100%!important;}
In the head section of your html place your custom.css below bootstrap.css to override the styling
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
When I open https://bomengeduld.github.io/debadkamers/ on my mobile device, half of the project is not rendering. Only headr & first section is showing. Second section not. It looks completily blanc. It does renders perfect on desktop.
What I have tried so far
1) I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I tried to add css to <style> tag in <head>
3) The css is held in seperate file, and I already tried to add it to the style.css file.
https://github.com/bomengeduld/debadkamers/blob/master/css/responsive.css
It should look like this
You are not referring to the css folder change <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="css/style.css">
I have a page that I'm making, and when I export it, the text goes from being formatted to unformated. I just have the div, with the class, and the text. So, why is it doing it and how can I fix it?
mmhh... this could be the problem, when you load the page on mobile internet, not over wlan)
you have to set some params for mobile... you can check, if this works for you
this solved my problem:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
I have my mobile stylesheet as such:
<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
And my main stylesheet as such:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
When I go on the page from a mobile device, it has a mix of mobile and main stylesheet rules. How can I make the mobile stylesheet be exclusive to mobile devices, and the main stylesheet exclusive to the screen?
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
Also make sure you have this in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Well, your problem is that both devices use screens. Your css/style.css file targets any devices that uses a screen, and any styling should be as applicable to a narrow device as it is to a wide device. You may need to refactor your style rules.
Also, make sure that your mobile stylesheet is listed after the generic screen one, or else the generic screen stylesheet will override the mobile one.
Below are my stylesheets for my mobile site:
<META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<META name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="handheld" href="css/mobile.css" />
I loaded the page in an iPhone and it looks like it's supposed to. However when I load the page in a Blackberry it doesn't use the "handhled" one but rather tries to use the other stylesheets. Anyone have any thoughts to why this happening?
Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.
Consider media queries (as you've done for iPhone) instead of media types. http://www.alistapart.com/articles/responsive-web-design/ Many devices don't support the handheld media type.