on my site i have 3 css
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />
i thought the media handheld will automatically load my site formated for devices
when i load my site with my android, i still see the "site.css" why it does not load the handheld.css?
Apparently Android/iPhone/Nokia browsers don't think that they are handhelds.
You should use media queries to detect devices.
Related
I have an ASP.NET MVC project using Boostrap 4 and jQuery DataTables. For both tools, the CSS files load but none of the CSS rules are applied. Looking at the network tab of Chrome dev tools, content type is coming over as text/css. Here's the code within the head tag of the main layout page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
#*<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />*#
<link href="#Url.Content("~/Content/Site.css")"rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/pushy.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/MyStyle.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/DataTables/css/jquery.dataTables.min.css")" rel="stylesheet" type="text/css" />
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap.min.css")" />*#
<link href="#Url.Content("~/Content/DataTables/css/dataTables.bootstrap4.min.css")" rel="stylesheet" type="text/css" />
I've tried using runat="server" in both the link and head tags, using #Styles.Render instead of a link tag, swapping out the minified file with the full one, href with and without #Url.Content(), and using a file directly from Bootstrap, all with no success (haven't been able to find any other solutions on SO either).
MyStyle.css loads and applies properly, but not the Bootstrap or DataTables CSS. This is driving me nuts trying to figure out the issue - what am I missing?
I'm running .NET 4.6.1 on Visual Studio 2017.
Actually another css file from _Layout.cshtml overwrites the view page css file.removed main.css from Viewpage.cshtml
Hey I have a problem which is two part but the first one is obviously where I must begin:
I have inherited a project which has three stylesheets, desktop.css, tablet.css, and mobile.css - they are called like so on the page:
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
However the programmers before me were in a hurry and really, most of the code is the same; they just made tweaks per file as needed. Probably 90% of the code is the same.
My goal is to have a common stylesheet first as below:
<link rel="stylesheet" type="text/css" href="/css/UNIVERSAL.css" />
<link rel="stylesheet" type="text/css" href="/css/tablet.css" media="all and (min-width:600px) and (max-width:799px)" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="all and (min-width:10px) and (max-width:599px)" />
<link rel="stylesheet" type="text/css" href="/css/desktop.css" media="all and (min-width:800px) " />
and get all common css into universal.css, and include on the other files only the "overrides" needed for that particular device.
All three files are a mess. There are multiple instances of a class/id declarations. They are quite out of order. I know there are CSS prettifiers out there, but is there any application which will take a CSS file, "READ" it, and re-output it in a condensed format?
It would be also nice to do a diff on the css and see what's different. DIFF itself is not going to work because of being out of order in probably multiple ways. So if you know anything in this regard, I'd appreciate it.
Check the advanced options of proCSSor
On XP, IE8 site http://rweberjewelry.com/ is ignoring styles. Here's a video http://www.screenr.com/AeMH. It works fine on Win7 IE9. This started when I updated to WP 3.5.2 and latest theme version.
Problems - images not showing, fonts are huge, page container does not fill page, and just overall ignoring of most styles!
Theme designer says it renders well on their browser emulator and "..there is something else in play either on your network or computer. If the browser is getting pushed into compatibility mode for some reason or something similar."
I had a friend check her computer and it is having the same problem.
I read a suggestion to add the following but it didn't help:
meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
I checked:
IE>tools>compatibility mode> website is not listed and "display all websites in compatibility mode" is not checked and ripped paper icon is not showing next to the URL so I don't think it is in compatibility mode.
Much thanks for any ideas.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/style.css" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/grid.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/layout.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/slideshow.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/shortcodes.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/js/projekktor/theme/style.css" type="text/css" media="screen"/>
<!-- plugin and theme output with wp_head() -->
<link rel='stylesheet' id='testimonials-widget-css' href='http://www.rweberjewelry.com/wp-content/plugins/testimonials-widget/testimonials-widget.css?ver=3.5.2' type='text/css' media='all' />
<link rel='stylesheet' id='avia-woocommerce-css-css' href='http://www.rweberjewelry.com/wp-content/themes/propulsion/config-woocommerce/woocommerce-mod.css?ver=3.5.2' type='text/css' media='all' />
<!-- custom styles set at your backend-->
<style type='text/css' id='dynamic-styles'>
<!----a ton of stuff deleted - too long ----->
</style>
<!-- google webfont font replacement -->
<link id="google_webfont_1" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo" />
<link rel="stylesheet" href="http://www.rweberjewelry.com/wp-content/themes/propulsion/css/custom.css" type="text/css" media="screen"/>
</head>
You seem to have some HTML issues that IE8 isn't handling quite as gracefully as the other browsers. Some of the worst offenses are apostrophes in HTML attributes, which prematurely end the attribute.
W3C validator results
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.
Currently I have my stylesheets as such:
<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
Is there a way to force style.css to be only on a monitor, and force print to only be on printed matter? I'm trying to make a printer-friendly page and it's taking forever to override the mass of rules in style.css.
Use media="screen" on the main stylesheet so styles are only applied on a monitor screen:
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
If you don't specify a media attribute, the stylesheet takes a default of media="all", which means styles are applied everywhere.
Read more about media types here (HTML spec) and here (CSS spec).