My HTML is as minimal as possible, moreover a content of id „content” is generated in JavaScript.
h1 has a static height based on font-size but I’d like to modify this (in css) if necessary, and at times h2 is showed, at times not.
Is it possible to set content= body - h1 height - h2 height, but if content > body height, then spread body? Without any external libraries.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main-styles.css">
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="apple-touch-icon" type="image/png" href="./favicon.png">
<link rel="stylesheet" href="#" id="custom-css">
<base href="./">
<title>Perfume Finder</title>
</head>
<body>
<h1>Perfume Finder</h1>
<h2 id="txt-title"></h2>
<div id="content">
</div>
<script type="module" src="./modules/script.js"></script>
</body>
</html>
So what I think you might need are "css functions", you can use the calc() function to kind of do what you want. I couldn't really understand what you were asking for in terms of the calculations themselves.
But here are a few links on where to start:
https://css-tricks.com/complete-guide-to-css-functions/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
Hope it helps
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
Hi I got an issue when running my project on mobile browser. The entire content (except navbar cause its absolute position) is pushed to the left.
Page on mobile device:
I've tried to run the project on mobile view (desktop browser) and got no issue. Any idea how to fix it?
Page on desktop browser
Edit: This is the main layout for the HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sinona</title>
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/icon/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/icon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/icon/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('assets/img/icon/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('assets/img/icon/safari-pinned-tab.svg') }}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body id="page-top">
#include('landing.partials.navbar')
<main class="main">
#yield('content')
</main>
#include('landing.partials.footer')
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('js/scripts.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/lazy_load.js') }}"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>
I also use bootstrap and my own custom CSS. Since the code is pretty long, you can see it on these links, bootstrap (styles.css), https://snippet.host/gxop, my own (custom.css), https://snippet.host/eqzn
Edit 2:
Since the abnormality appear on whole content, I assume the problem is related with the body or root main content. These are related css:
styles.css
...
*,
*::before,
*::after {
box-sizing: border-box;
}
#media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
...
custom.css
:root {
--accent-1: #356f4a;
--accent-2: #2a5333;
--accent-3: #fbb41f;
}
.main {
min-height: 80vh;
}
• Okay the problem why your website is pushed to the left is , you need to tell the browser to adjust the content size according to the screen size 🖥️.
• THE SOLUTION :
<meta name="viewport"
content="width=device-width">
• You just need to add this code inside of your "head tag".
• EXAMPLE :
<!DOCTYPE>
<html>
<head lang="en" dir="ltr">.
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
• I hope this would solve your problem 🙂, Have a great day 👍, Bye.
I could be wrong about this but I thought, in the viewport meta-tag that shrink-to-fit not only prevents shrinking it prevents proper scaling. You could try removing that part just as a test to see what happens.
What I think is, somehwere on your page is an element which is too wide for the viewport (this could be because of horizontal margins or padding) or it is simply wider than everythign else on the page (not contained) and your shrink-to-fit is trying it's best.
This is just a guess.
After decades of debugging, it's finally solved. Looks like the entrance animation for each component overlapping the screen and pushing whole content to the left. I already fixed it by making the the body hide the content when overflowing,
overflow: hidden;
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
I am using these two links but not applying to my file.
Could you be more specific, what is not working? have you tried changing font-family of the element you want to change font of? Here is font applied to the body.
body {
font-family: 'Lato', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
https://jsbin.com/wotusas/
You can use them both at the same time, that should not be a problem.
To make the font getting applied to your site, you also need some CSS rules. these also need to have higher precedence than the ones from the boostrap file, or the same precedence but applied after the bootstrap file.
Should we include the Bootstrap container class inside or outside of HTML semantic class <article>?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div class="container">
<article>
...
</article>
</div>
<script src="js/main.js"></script>
</body>
</html>
Or, this is recommended?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<article>
<div class="container">
...
</div>
</article>
<script src="js/main.js"></script>
</body>
</html>
Bootstrap requires a containing element to wrap site contents and house our grid system
http://getbootstrap.com/css/
With that in mind - you should keep the container on the outside. You can use grids to house the articles from that point on.
As said in the HTML5 Specs:
The article element represents a complete, or self-contained,
composition in a document, page, application, or site and that is, in
principle, independently distributable or reusable, e.g. in
syndication. This could be a forum post, a magazine or newspaper
article, a blog entry, a user-submitted comment, an interactive widget
or gadget, or any other independent item of content.
AFAIK the "container" class does not give your code any kind of semantic markup. You can have articles inside articles, containers inside containers, articles inside containers, or containers inside articles. It just depends on what you want to show.
You can also have a look to this.