I read that the iPhone 6 Screen Resolution is 750*1334. But when I have for example a text, etc. and center it, it is not centered precisely. But when I use 50% with CSS, then it is centered precisely. A simple ID with DIV:
"margin-left: 375px;"
"margin-left: 50%;"
Try using meta viewport in the head of your html
<meta name="viewport" content="width=device-width, initial-scale=1">
this should fit the content according to the device
Please look here for the code:
https://www.w3schools.com/code/tryit.asp?filename=FWSYYEYX7IV5
Simple, just remove margin-left: 375px;
and add text-align: center; (in #text)
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: red;
width: 100%;
height: 300px;
}
#text {
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="text">Test</div>
</div>
</body>
</html>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!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>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!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">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
I cant get css and html code to work together using padding,margin, floats. I'm stuck. If put float left it stays in the middle. Basically it won't size properly. I hope this explains it... I'm frustrated
I have tried my books, google, w3schools. I just seem to be missing something. I'm in a coding boot camp and I don't have time in class to ask everything I need to.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Easier Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div id="header">
<h6>header</h6>
</div>
</div>
</body>
</html>
MyCSS:
.container {
padding: 250px;
margin-bottom: 500px;
margin-right: 250px;
margin-left: 250px;
margin-top: 20px;
background-color: gray;
}
#header{
width: 600px;
padding-right: 10px;
float: right;
background-color: white;
First, you have to give a particular width to the container div,then float prorperty will work.
Float property works correctly only when the parent has been given a sepecific width.
So, I'm trying to make a mobile version on my desktop site (Have a look here to see what I'm going for www.adamaucock.com).
The issue I'm having is that I can't seem to set the height correctly, in that my content is about half the page and then the rest is just dead space so the height is set too short for the window. Working with the body tag didn't work and I've seen people suggesting wrapper elements also but I can't seem to get that to work. I've tried using vh and %. I've also tried hiding the overflow for x and y separately and together on both elements to no avail.
The only thing that fixed the issue was setting the wrapper to be fixed but then the scrolling didn't work at all.
HTML:
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
CSS:
body {
background-color: #04244F;
font-family: raleway;
margin: 0;
padding: 0;}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;}
Any help would be much appreciated.
Thanks in advance.
So, I have just found a solution but I'm not sure how well it'll work across devices. I used the viewport meta tag to set the initial scale to .25 rather than 1 like so.
<meta name="viewport" content="width=device-width, initial-scale=.25">
On the two devices I have to hand (Google Pixel 1 and iPhone 4) it seems to work. Will update if I run into any problems with this approach.
overflow-y: hidden on the body/html should do the trick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
body {
background-color: #04244F;
font-family: raleway;
}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;
}
h2 {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
</body>
</html>
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!