This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Website screenshot in PC
Website screenshot in the mobile device
Here is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>>
and this is the CSS code
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
use following css
.first
{
color: white;
text-align: center;
}
.first h1
{
display: inline-block;
}
Hey There are many solutions.
You can set width of element like the below code.
Or You can set the display: options into the element (for example, display:contents)
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 100%;
/* display: contents; */
}
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
<body>
<div class="first">
<h1>Hey!</h1>
You can use flexbox especially in media queries for mobile size or desktop size
.first {
position: relative;
margin-right: 300px;
color: white;
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>
I think you just need to remove your margin-right: 300px; - that's going to end up moving everything 300px to the left, thus leaving it very off-center on mobile.
Related
I am making a website using PHP to open a static website on Heroku.
I have a problem where everything is fine before deploying on Heroku. Once it is deployed suddenly there are CSS :root head code showing as plain text on all the html files. Here is a picture.
When I do inspect it shows that the plain text is part of the head element. I don't get why it is showing, I don't know if it's because of something to do with PHP or just Heroku. Please help.
Here is some CSS code I have for the file and html stuff too. (This is in the file base.css)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
display: block;
}
head {
display: none;
}
.navbar {
background-color: #b6bcc2;
/*border-bottom: 5px solid white;*/
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
(This is in the file home.html) There are no tags and I have only used tags.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Project H.E.L.L.O.</title>
<link rel="stylesheet" href="../css/base.css" type="text/css" />
<link rel="stylesheet" href="../css/home.css" type="text/css" />
</head>
Here is also the only PHP I used :
<?php include_once("html/home.html") ;
I also have a composer.json file with {} and nothing else.
The blue block collapses and unfolds, and I need it to appear and perform an animation where it slides down
It's all about slideToggle(300) - this is the very animation of folding and unfolding. I don't want to change the code too much, what can I do about it?
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="javat.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
css
body {
background-color: gray;
}
.content_toggles {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
z-index: 2;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
jquery
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
document.getElementById("content_blocks").style.display = "block";
return false;
});
});
I'm not really sure what you're asking here - you should clarify by writing what the issue you're facing is, and what the expected result should be. However, I did notice that you're including your JS file before you load the jQuery library. Simply swap the order of these two lines, or else your javascript code won't work. This is because your javascript code uses jQuery, but you are loading your code before you initialize the jQuery library. Change your HTML to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I also noticed you are trying to access the content_blocks element by its ID, but you define it by class. Instead of document.getElementById("content_blocks").style.display = "block"; do
// vanilla JS
document.querySelector(".content_blocks").style.display = "block";
// jQuery
$('.content_blocks').style.display = "block";
Or you can do
<input type="button" id="content_toggles"\>
<input type="button" id="content_blocks"\>
Do you mean something like this?
$(document).ready(function(){
$('.content_toggles').click(function(){
$('.content_blocks').slideToggle(300);
});
});
body {
background-color: gray;
}
.content_toggles {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
border: none;
border-radius: 10px;
background-image: url("img/builderhall1.png");
background-size: 100px;
background-repeat: no-repeat;
}
.content_blocks {
display: none;
position: absolute;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: blue;
border: none;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS</title>
<link rel="stylesheet" href="stylet.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="javat.js"></script>
</head>
<body>
<input type="button" class="content_toggles"\>
<input type="button" class="content_blocks"\>
</body>
</html>
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
I am following a web development tutorial to create a landing page. I'm using a combination of CSS, HTML, and JS. My site will not detect a navigation bar that I have attempted to draw with SCSS. It's meant to be dark blue and sit on the top right. Below is the code for the project this far.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/style.css">
<title>Frontend Mentor | Easybank landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header class="header">
<nav class="flex flex-jc-sb">
<a href="/" class="header__logo">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
</nav>
</header>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</div>
<script src="/app/js/script.js"></script>
</body>
</html>
style.scss
#import "variables";
#import "globals";
#import "header";
_globals.scss
hmtl {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Public Sans', sans-serif;
line-height: 1.3;
}
/// Flexbox
.flex {
display: flex;
&-jc-sb {
justify-content: space-between;
}
&-jc-c {
justify-content: center;
}
&-ai-c {
align-items: center;
}
}
_headers.scss
.header {
nav {
padding: 24px;
}
&__menu { // Mobile Menu
> span {
display: block;
width: 26px;
height: 2px;
background-color: $darkBlue;
&:not(:last-child){
margin-bottom: 3px;
}
}
}
}
I have a time input as you can see below
Here label and text are very close and not look well.In order to separate then I gave some padding-top to text but it also moved clock icon down on the right side.
How can I align the text without affecting that clock icon?
Padding added version is below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
.floating-input{
padding-top: 17px;
padding-left: 19px;
}
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events:none;
z-index: 1;
}
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>
On Chrome and Edge(Chromium) you can use the ::-webkit-calendar-picker-indicator pseudo element selector to position the clock icon to counteract the padding.
label {
color: gray;
font-size: 11px;
position: absolute;
left: 20px;
top: 3px;
pointer-events: none;
z-index: 1;
}
input[type="time"].floating-input {
padding-top: 17px;
padding-left: 19px;
}
input[type="time"].floating-input::-webkit-calendar-picker-indicator {
position: relative;
top: -6px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<label>From</label>
<input type="time" class="form-control w-25 floating-input" id="timeInput">
</body>
</html>