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;
}
}
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
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;}}
I am trying to create a resizable html page that mimics the java applet clock layout and am not sure if I am approaching this in the right way. This 3 clock picture below is what I am trying to create now. Currently I used div, margins, padding to lay out a 1 clock using css but since the font-size are all different per line I am used the vmin font to handle the auto-resizing; but with mixed results. I have being looking online for a tutorial or examples that would address how to do this problem without success since the examples are resizing text paragraphs that are the same font-size throughout or images.
Does anyone know of a tutorial site or example that addresses this type of problem? Maybe I should be doing this using canvas or something instead of div tags. Thanks.
This was my 1 clock page (minus all the css stuff):
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>
<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>
I suggest checking out bootstrap for laying out elements on a page. You can create a simple layout easily and it will be responsive.
As far as font size goes, there is no way to show the page the same across all browsers and devices. Even using pixels which is a fairly common standard will have different results on retina displays. Read this to learn more about font sizing.
I re-read the vs font descriptions and redid my css sheet. This resizes the fonts but the negative margin-left doesn't look the same on the linux box vs. PC even though I am using the same terminal screen. Its better then before however.
<!DOCTYPE html>
<html>
<style>
body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #fff;
background: #000;
margin: 2vw 10vw 2vw 10vw;
}
span {
white-space: nowrap; /* Specify that the text in element will never wrap */
}
.header {
font-size: 4vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.header-split {
display:block;
margin-left:15vw;
}
.header-split span {
display:block;
float:right;
width:30%;
}
#header-ul {
border-bottom: 3px solid lightgrey
}
#rm {
text-align: center;
margin-left:-10vw;
}
.siteTdrs {
font-size: 3vw;
font-weight: bold; /* bold font */
color: lightGray; // color for tdrs/site
}
.mission {
font-size: 4vw;
}
.clock {
font-size: 8vw;
text-align: center;
}
.terraColor {
color: #00ff00; // GREEN
}
.aquaColor {
color: #00ffff; // CYAN
}
.auraColor {
color: #ffc800; // ORANGE
}
</style>
<body>
<div id="wrapper">
<div id="header-ul"><div class="header header-split">AOS<span>LOS</span></div></div>
<div id="rm" ><span id="terraRelay" class="siteTdrs">TDE</span> <span class="mission terraColor">TERRA</span></div>
<div id="terraTime" class="clock terraColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="aquaaRelay" class="siteTdrs">SG1</span> <span class="mission aquaColor">AQUA</span></div>
<div id="aquaTime" class="clock aquaColor"><span>00:00:00 00:00:00</span></div>
<div id="rm" ><span id="auraRelay" class="siteTdrs">TDW</span> <span class="mission auraColor">AURA</span></div>
<div id="auraTime" class="clock auraColor"><span>00:00:00 00:00:00</span></div>
</div>
<p id="Msgs">this is a error</p>
</body>
</html>
I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.
The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:
here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myWebpage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="css/font-awesome.min.css"rel="stylesheet">
<link href="main-sanctuary.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hellloooooooooooooo!</h1>
<p id="first-p">Welcome All!<br>Make Yourself at home.</p>
<p id="secondary-p">Scroll down.</p>
<button id="logBtn">Log In</button>
<button id="signBtn">Sign Up</button>
<i class="fa fa-chevron-down fa-4x"></i>
</header>
</body>
</html>
and here is the css:
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
h1 {
color: honeydew;
font-family: "Helvetica Neue";
font-size : 7.5vw;
margin-bottom: 30px;
}
#first-p {
color: honeydew;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 3.5vw;
margin-bottom: 50px;
}
#secondary-p {
position: inherit;
color: #FFD700;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 2vw;
margin-bottom: -90px;
}
.fa {
color: #FFD700;
}
So how do I properly position the .fa under #secondary-p on my webpage & scale it as well?
Just remove margin-bottom : -90px; from #secondary-p, this will make Cheveron Icon go below Scroll Down (#sencondary-p).
And for scaling the Cheveron Icon, add font-size to it with a value in vw. Like This :-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here.
Update
For shifting them a little bit down, wrap the .fa element and the #sencondary-p element inside a div and give that div some margin-top. Like this :-
HTML :-
<div id="wrapper">
<p id="sencondary-p">Scroll Down</p>
<i class = "fa fa-chevron-down fa-4x"></i>
</div>
CSS :-
#wrapper{
margin-top : 100px; /*Increase the value to shift more down*/
}
See the updated demo here.
Put the chevron inside a div and set the div's position. (Use position: static, which will keep the position consistent.)
I have a HTML file which has the following code;
<html>
<head>
<LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
</head>
<body>
<span class="ipad_text">DESKTOP RED; iPad GREEN</span>
<br />
<span class="ipad_text2">DESKTOP BLACK; iPad BLUE</span>
<br />
<span class="ipad_only">iPad ONLY SHOW</span>
<br />
<span class="ipad_only2">iPad ONLY 2</span>
</body>
</html>
Also there are 2 CSS files under css folder (desktop.css and ipad.css);
In desktop.css, I have
#import "ipad.css";
.ipad_text{
font:42px arial bold;
color: red;
}
.ipad_text2{
font:22px verdana bold;
color: black;
}
.ipad_only{
display:none;
}
And in ipad.css, I have
#media only screen and (device-width:768px)
{
.ipad_text{
font:32px arial bold;
color: green;
}
.ipad_text2{
font:22px verdana bold;
color: blue;
}
.ipad_only{
display:block;
}
.ipad_only2{
color: red;
font:52px arial bold;
}
}
Now for some reasons, this is not working..If I cut/paste the code from ipad.css under the desktop.css file as follows, the page displays correctly in both desktop and iPad...What I am doing wrong? I want the 2 CSS to reside in separate files...Please help me.
Following works perfectly
#import "ipad.css";
.ipad_text{
font:42px arial bold;
color: red;
}
.ipad_text2{
font:22px verdana bold;
color: black;
}
.ipad_only{
display:none;
}
#media only screen and (device-width:768px)
{
.ipad_text{
font:32px arial bold;
color: green;
}
.ipad_text2{
font:22px verdana bold;
color: blue;
}
.ipad_only{
display:block;
}
.ipad_only2{
color: red;
font:52px arial bold;
}
}
Like I said in my previous answer...
#imports have to come before any other style declarations.
But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles.
... because your non-iPad styles apply to all media, including Mobile Safari on iPad. Since your non-iPad styles come after your conditional #import, they'll override your styles whether they get imported or not. This is normal cascading behavior.