I'm attempting to make a simple site mobile responsive using "#media only screen", but one of my titles is reverting to an inherited font rather than continuing to use the CSS defined font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<h4> Short Title </h4>
</body>
//CSS
[class*="h4"]{
font-size: 5vw;
}
#media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
On Inspect mode in Google Chrome, it indicates that upon a smaller screen size, h4 is inheriting it's font from it's container element, col-8.
.col-8{
font-family:'Open Sans', sans-serif;
}
Every other element on the site is correctly changing when the screen size is lowered below the defined 800px, including other text, and I've repeatedly cleared my cache throughout the process to no avail. !important seems to have no effect either.
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
What can I do to cause the h4 element to keep displaying the 'Pacifico' font instead of the inherited font?
Just set font-family: 'Pacifico', cursive; to your h4 element outside of the #media statement. This way no matter the size of your page, Pacifico (as long as it has loaded) will be the font.
//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>
<body>
<div class="col-8">
<h4> Short Title </h4>
</div>
</body>
//CSS
h4{
font-family: 'Pacifico', cursive;
}
.col-8{
font-family:'Open Sans', sans-serif;
}
#media only screen and (min-width: 800px){
h4{
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}
Related
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
For some reason I can't get Google Fonts to work correctly on Safari. Both on a Mac and on mobile. Any suggestion to what I can improve to make it work on Safari too?
I have tried both
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;500;700&display=swap');
</style>
and
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
Even embedding them locally as Woff2 fonts.
The CSS to show the font is
body {
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #6b6a6a;
font-family: oswald !important;
text-transform: uppercase;
background:#202020;
background-size: contain;
display:none;
overflow:hidden;
overflow-y:scroll;
}
.text_widget {
font-family: lato !important;
font-weight: 400;
text-transform: none;
margin-top: 40px;
}
You need to use CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
I have the following HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-image:url('images/background-website-web-blue.jpg');background-size: 100% 100%;background-attachment:fixed;">
<div class="content1" style="background-color: rgb(52,129,162,0.8); box-shadow: 10px 10px 10px rgba(0,0,0,0.8);" >
<div class="container" style="text-align:center;">
<div class="jumbotron" style="background-color: transparent;"></div>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 700;" >dockdockdock</p>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 25px; font-weight: 400; font-style: italic;">dockdcokdock</p>
<p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 400; line-height: 52px;" >DUck duck duck duck <i style="color: red; font-weight: 700;">60 Hari</i> Bergabung Di Ecourse Ini</p>
<br><br><br>
</div>
</div>
</div>
</body>
</html>
and CSS:
#media only screen and (max-width: 600px) {
p{
font-size:5px;
}
}
But why don't the <p> tags change into size 5px when media 600px or smaller?
And if I put the <p> tags above <div> it's working
Because the specificity of inline style is ranked much higher then just CSS
If you want your css for mobile to work with given HTML you need to add !important like
#media only screen and (max-width: 600px) {
p {
font-size: 5px !important;
}
}
Then it will work.
But to be honest, we should never use !important. That can be achieved easily in this case just move all your inline styles from HTML to the top of the CSS file
Working example with !important https://jsfiddle.net/nvzupxb0/
Working example with CSS only https://jsfiddle.net/nvzupxb0/2/
Notes on the CSS only solution
had to add some classes on <p> tags because your markup didn't allow me to use :nth-child() pseudo selectors
removed the <br> tags from the last (.third) p tag because line brakes can be achieved with CSS padding-bottom. giving the advantage of changing the padding-height via CSS for mobile devices!
Just move you inline css which is given in p tag to external css file or you can write !important like this -
#media only screen and (max-width: 600px) {
p{
font-size:5px !important;
}
}
you can create a media query and make the paragraph with 5px !important.
#media (max-width: 600px) {
p{
font-size: 5px !important;
}
}
I have been banging my head on the table trying to figure out why this happens. I have set up an anchor that has padding on the top, bottom, and left sides. Inside that anchor is two text elements and as the background of the anchor is an image.
Now when I zoom out (not shrinking the viewport) in chrome, everything seems to shrink as expected until I hit 80%. At this point the content continues to shrink but not the padding on the left side! In FireFox it seems to work as expected.
Attached is my code, please any ideas on how to explain this will be appreciated.
html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}
a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}
.logo {
padding: 10em 10em 0 0;
background: url(../images/some-image.svg) left center no-repeat;
display: inline-block;
vertical-align: bottom;
}
.logo.main {
padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
display: block;
}
.logotype {
font-weight: bold;
white-space: nowrap;
}
.logotype.title {
font-size: 4em;
line-height: 1.1;
color: #646469;
}
.logotype.subtitle {
padding: 0 0 0 0.078em;
font-size: 2.1em;
line-height: 1.1;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Company">
<base href="">
<title>Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
</head>
<body>
<header>
<a class="logo main" href="">
<span class="logotype title">Line 1</span>
<span class="logotype subtitle">Line 2</span>
</a>
</header>
<section>
</section>
<footer></footer>
</body>
</html>
The issue here comes from the difference in pixel representation between browsers. Meaning - Chrome and Firefox might handle some fixed pixel values differently (don't ask me why, its just how the world functions with everything).
Possible solution 1: Try and set the padding values in % so that they can be relative to each other.
Possible solution 2: This thread on CSS Tricks about not breaking the layout when zooming:
Possible solution 3: Check your viewport tags. Use this thread.
Like #DarkxPunk said, the link goes to the far left side on Firefox and somehow does not go to the far left in Chrome.
Issue visualization for further investigation:
Chrome:
Firefox:
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">