This question has been asked a million times, and i have followed the answers but it still doesnt work. what am i doing wrong?
I have in the head
<meta content="width=device-width, initial-scale=1" name="viewport" />
and here is the intial css
.navbar-nav{
float:right;
font-family: 'Playfair Display', serif;
}
here is the media query:
#media only screen and (max-width: 800px) {
.navbar-nav{
float:right;
font-family: 'Playfair Display', serif;
font-size: 50px;
}
}
i added the font size so i can visually identify if it works, but id doesnt. what am i doing wrong?
here is my head:
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Stuff</title>
<meta name="description" content="Simplified Bootstrap template with sticky menu">
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Knewave|Merriweather|Playfair+Display" rel="stylesheet">
<link href="css/sticky-menu.css" rel="stylesheet">
<script src="js/form.js"></script>
If your display's width is larger than 800px, your media query wouldn't match.
Try verifying by setting the max-width to a very large number like 10000 and you'll likely see the changes applied.
Related
I tried to import font from Adobe and I struggle with polish characters. The font displays Polish characters on the Adobe website correctly but on mine not. What am I missing?
My simple HTML with CSS:
body {
font-size: 60px;
font-family: stolzl, sans-serif;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.typekit.net/jwn6fph.css" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
wymagające
</body>
</html>
And that's a screenshot from the Adobe website
what do I have to do to fix this?
This question already has answers here:
Specifying Style and Weight for Google Fonts
(7 answers)
Closed last year.
i have imported two fonts in my website Montserrat Extra-light 200 and Montserrat Medium 500 but when i type
font-family: 'Montserrat Extra-light 200', sans-serif;
it apllies the Montserrat Medium 500 font but i want to apply the Montserrat Extra-light 200
but there i an another text which shout use Montserrat Medium 500 so i cant remove one font
so is there any way which Montserrat to use in a specific text
here is my html and css code
#section1_text1 {
font-family: "Montserrat", sans-serif;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/test/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>
so i want to specify which font to use at a specifec text
Your HTML and CSS is correct. You only need to add the font-weight to make sure you can use specific font weight for your chosen font.
styles.css
#section1_text1 {
font-family: "Montserrat", sans-serif;
font-weight: 200;
}
#section1_text2 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/test/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200;400&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<main>
<div id="section1">
<h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
<h2 id="section1_text2">Agile Way Of Development</h2>
</div>
</main>
</body>
</html>
Have I made a mistake when writing the code? And if not, is there another way to link CSS to HTML Page? I have tried a couple different ways of writing it but nothing seems to work.
Here's how I wrote it...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
I also tried...
<head>
<title>Quiz App</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link = rel="stylesheet" href="css/style.css"/>
</head>
Thanks
You wrote viewport as viewpoint in your meta tag.
In your first snippet, change this:
<meta name="viewpoint" content="width=device-width, initial-scale=1">
To this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hello I have created a website: Omicrome.com The desktop version works find bar a few things I am still working out that are irrelevant. When I go onto the mobile version everything is zoomed in. If I dont set the viewport and put in:
<meta name="HandheldFriendly" content="true"/>
The content fits the way I want it on my Android HTC one m9. I run a "is my site mobile friendly test" and It says it isn't mobile friendly because I have not set the viewport and the content dosnt fit the screen, on my phone it does but on the image on those sites it is all zoomed in. If I do set the viewport then everything is zoomed in on my phone and on those websites. Here is a quick snippet of the head part of my page.
<html class="HTML1">
<head>
<title>Omicrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"language="javascript" type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="img/icon.ico" type="image/x-icon" />
<link rel="ICON" href="img/icon.ico" type="image/ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/MobileStyle.css">
<meta NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="The homepage for Omicrome.com, where you get the best of technology, science and making. We have on going projects and many articles for your enjoyment.">
</head>
<body>
<div class = "container_24" style="min-height: 100%;">
<header>....
Why does this happen and can I fix this. By the way I do have media queries for the css:
#media screen and (max-width:380px) {
#HTML1{
}
#rectban{
position: relative;
width: 100%;
height: 120px;
margin-right: 6px;
background: #ffffff;
}
#ULBTN{
margin-top:-13px;
}.....
I did try setting HTML1 to have a margin and padding of 0 and set their widths and heights to 100% but still it didnt work. Feel free to visit the page and tell me if it is zoomed in or not.
Try to set this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
This is the proper mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">
I made a simple responsive website and everything is working great when browser reads file from my computer but when I put it on my server Mozilla is not loading CSS. It loads fine in Chrome and IE.
Here is the HTML code:
<head>
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css\normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css\main.css">
<link rel="stylesheet" href="css\responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And CSS (in main.css) starts with this:
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Is it a problem with encoding? Is there anything I should put in main.css and responsive.css file?
I didn't change any settings in Mozilla and my version is 31.0.
Website: http://test.mateajdukovic.com
Thanks!
The errors are:
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cnormalize.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cmain.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cresponsive.css"
Try changing the \ to / in your HTML.
I am not sure But according to me you should use forward slash.
instead of "\" use "/" in your path of hreg tag
i.e.
use this:
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Rest all seems good.