I'm testing basic layout:
<html>
<head>
<link type="text/css" rel="stylesheet" href="./../public/css/main.css">
</head>
<body>
</body>
</html>
And there is style of body element
background-color: rgb(255, 0, 0);
color: rgb(51, 51, 51);
display: block;
font-family: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
font-size: 14px;
height: 1091px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
min-width: 1024px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1024px;
The thing is that I was sure that body width will be scaled and fitted to the phone size. But when I tested on iPhone 3GS horizontal scrollbar appeared. Why width is not scaled?
Add the below to your head:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
Add the following meta tag to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It's because you are defining :
min-width: 1024px;
width: 1024px;
You should remove both, and define the meta :
<meta name="viewport" content="width=device-width">
Related
I Want to make it so the 100 appears in the top right corner of my div, I have it aligned to the right but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body {
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan {
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
display: flex;
justify-content:space-between;
align-items: center;
}
h1 {
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2 {
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3 {
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<div>
<h2>Titan</h2>
<h3>Exo Male</h3>
</div>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
I want the main section of the page to be horizontally centered and to have varying top and bottom margins. I can center the section with margin-left: auto; margin-right: auto; but I can't set the top and bottom margin. The main section is using .main-content class. Please have a look.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background-color: rgb(14, 18, 43);
}
header {
margin-top: 2em;
margin-bottom: 2em;
}
h1 {
text-align: center;
color: rgb(228, 228, 228);
font-family: 'Courier New', Courier, monospace;
}
.main-content {
display: block;
width: 600px;
background-color: antiquewhite;
margin-left: auto;
margin-right: auto;
margin-top: 500;
}
<!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>Krazuescode.com</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>UINASHIoAMS.COM</h1>
</header>
<section class="main-content">
Related searches
<div>Software to Manage Remote Employees</div>
<div>Mobile Device Management for Ios</div>
<div>Mobile Device Management for Ipads</div>
</section>
<footer>
<span>Copyright © 2022</span><span>|</span>
Privacy Policy
</footer>
</body>
</html>
You forget add a px to 500
.main-content {
display: block;
width:600px;
background-color: antiquewhite;
margin: 500px auto;
}
More info you can find here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!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>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!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>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 3 years ago.
I'm having some issues with a blank space (or bar) on the top of my website.
I have tried playing with different values of padding and position as some other posts suggests but nothing seems to work.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Since you have givenposition: absolute to the img, you should specify the position of the image.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; /* added position */
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
You should add margin 0 to body class
css
body{
background: #fff;
margin: 0;
}
Just add top:0; to img tag.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Avoid using position:absolute;. Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.
To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
In your case just put that image as background to the division and place the text h1,h2 inside the division and add padding(if required) to the h1,h2 to align them.
I am trying to place padding for an input placeholder in FireFox and so far having no luck. I have tried using padding, text-indent and none work in FireFox for me. I have my code below. Any help is much appreciated.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<html>
<body>
<div id='contact_form'>
<input type='text' name='subject' placeholder='Subject' id='Subject' class='contactForm_keys' title='Subject' />
</div>
</body>
</html>
CSS:
#Subject{
margin-left: 43px;
margin-bottom: -8px;
width: 605px;
height: 40px;
}
#Subject:focus, #Subject:hover{
border: 1px solid black;
background: white;
}
/*input placeholder styling*/
input::-webkit-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}
input:-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
input::-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
#contact_frm input:-ms-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}