I have a custom section created for my WP page. You may find CSS and HTML here: http://www.cssdesk.com/J469A
I specified all the custom classes in CSS and added HTML via visual editor in WordPress, but the custom classes do not work, only HTML works.
You may have a look here: http://www.sflsupport.org/programs/ It's the very last section (Webinar Archive)
You have added your styles incorrectly.
They have been added to a media query that is further up in your CSS and won't be applied unless your screen is 767px or less.
#media only screen and (max-width: 767px)
It looks like the media query is missing it's closing }.
Related
I started learning html, and i have to create a site ( without js), this is my code:
https://codepen.io/marcin-panasiuk/pen/xxEreym
and i have to made this site responsive, like in this link :
https://www.figma.com/file/YglqfahKunKX59rnf4xL5Snc/Projekt-zaliczeniowy-%231?node-id=1%3A17
the thinner one is how this site should looks like on phones.
I cant use Bootstrap.
Any idea how to start this?
i had a look at your source code and your website
you can make your website responsive Bootstrap by using the below query
/* CSS file */
#media screen and (min-width:400px) {
.tagname{ /* tag-properties here*/
}
}
and you can link this in your HTML page by using
<link rel="stylesheet" media="screen and (min-width: px)" href="#">
for optimisation
and try to write separate CSS files for each device you're using. This makes debugging easier and faster
furthermore reduce size of CSS files used
and check out the following tutorial here
I'm new to web design and trying to make my site laptop friendly. I decided to use media queries to pull up different stylesheets as the window sizes change. This works great with Chrome and IE but Firefox uses the stylesheet I've written for laptops regardless of whether I pull it up on my laptop or my 1080p monitor.
This is the media query I'm currently using.
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
I've already checked all my extensions and none of them are making a difference.
Any help would be greatly appreciated.
Change your link to:
<link rel="stylesheet" href="styleslaptop.css"/>
Then open styleslaptop.css and at the bottom of the file add this:
CSS
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
I got the media queries from this article: Media Queries for Standard Devices
The best way to determine your breakpoints is by design not by device, but if your site is not that complex, cookie cutter should suffice.
UPDATE
Upon inspection of your 2 stylesheets I believe I know why the laptop CSS doesn't work in Firefox. At the end of both stylesheets you employ a rarely used at rule: #-moz-document url-prefix() {} This rule targets specific pages with the prefix(http://example.com/path/). An explanation of #document rule is here. There's two minor problems and one major problem with this:
The #document rule is only supported by Firefox.
If you really want to use this useless rule, then you should put a url in the parenthesis ex. #moz-document url-prefix(http://example.com/path)
So right now on the desktop CSS the properties and values that are in that rule set apply to all pages IF your'e using Firefox. Now on to the major problem.
On your laptop CSS you are missing the closing bracket of the #document rule set. This explains why you see a big difference in Firefox and why the media queries I gave you didn't work. To fix this simply go to the very bottom of your laptop CSS and place a }. You should now see Firefox the way you expected it to look, but keep in mind there are some extra rules in the dektop CSS:
#testimonialscontent h2 {
padding-top:0.25%;
padding-right:0;
font-size:1em;
}
body {
background-color:white;
}
FURTHER ADVICE
It's good that your'e taking the time to learn esoteric things, but be aware of how other developers do things as well. There's a slew of useless properties and rules that are too specific in purpose or to narrow in compatibility. Most but not all of them have vendor prefixes -moz, -webkit, etc. These are for the most part experimental, partially supported, and/or limited in some way, so remember Caveat emptor. So when you want to use something you don't see used very often or something with vendor prefixes, go to: http://caniuse.com/, a search will yield info such as which browsers support a property, element, etc.
On the stylesheets, one should try to use one stylesheet that has all of your custom styles. You should use your desktop CSS as the core rules, then place all of the new rules (not all of the rules) you have for the laptop and put them at the bottom of the core rules (desktop CSS), then put them inside the media query as I originally explained. The reason why you need to minimize the number of external files (not just .css but .js as well) is because they incur an extra HTTP requests, see this: Seven Mistakes that Make Websites Slow.
Good luck, sir. If I helped, don't forget to click that green checkmark and I if really helped helped you out, click that upvote arrow as well . ;)
Put your media queries inside your css file..
Link like this
<link rel="stylesheet" href="styleslaptop.css" />
And in your css wrap everything between
#media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.
Is this a known issue with gmail (and others), or is there a way to accomplish this?
#media only screen
and (max-device-width : 480px) {
.bodyContent div{
font-size:24px;
}
h1, .h1{
font-size:36px;
}
h2, .h2{
font-size:28px;
}
h4, .h4{
font-size:28px;
}
.preheaderContent div{
font-size:24px;
}
}
Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.
I had the exact same problem with Gmail. In my case, I wrote a HTML for an email newsletter. The problem was that I was minifying the whole HTML (including the HEAD section where the media queries were), which apparently broke apart the CSS syntax somehow, making Gmail to partially interpret css classes contained within the #media query. If this is your case, you can do two things:
Don't minify the HEAD section (what I did). Leave it untouched and put your media queries there.
Try different minifiers and go through the minified media queries to make sure nothing got broken.
In any case, if you are creating an email newsletter, make sure that you inline as much CSS styles as you can, i.e.: add your styles directly to your tags with the "style" attribute instead of using CSS classes.
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/