I created a responsive website but my home page is not responsive on any phone. I tried it on a few different ones.
This is how it should look on phones.
And this is how it looks on a few ones.
Here is the HTML of my homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="cssHomePage.css">
<title>Catalin Sandu</title>
</head>
<body id="body">
<div id="mydiv">
<div id="topMenuName"><h1 id="name">CATALIN SANDU</h1></div>
<div class="container">
<div class="nav">
<ul>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And this is the CSS for it:
#font-face {
font-family: gothic;
src: url("Fonts/century gothic.ttf");
}
body {
font-family: gothic, sans-serif;
color: #FFF;
text-shadow: none;
color: #595959;
background-color: #f2f2f2;
padding: 0;
height: 100%;
}
#body {
margin: 0 auto;
width: 100%;
height: auto;
background: url("Images/background1.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Images/background1.png", sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="background1.png", sizingMethod='scale')";
}
#mydiv {
width: 30%;
height: 250px;
border: 1px solid #FFF;
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav a:link, .nav a:visited {
color: #FFF;
font-size: 20px;
text-decoration: none;
font-family: gothic, sans-serif;
display: inline-block;
height: 40px;
padding: 15px 15px 0px 15px;
}
.nav {
width: 100%;
text-align: center;
}
.nav ul {
list-style: none;
padding: 0;
display: inline-flex;
}
.nav ul li {
margin: 0 auto;
display: inline;
}
.nav a:hover, .nav a:active,
.nav .active a:link, .nav .active a:visited {
background-color: #5aada0;
}
#topMenuName {
text-align: center;
padding: 20px 0 0 0;
}
#name {
color: #FFF;
font-size: 2.5em;
}
#media only screen and (min-width: 150px) and (max-width: 1100px) {
#mydiv {
width: 50%;
}
}
#media only screen and (min-width: 150px) and (max-width: 770px) {
#mydiv {
width: 90%;
height: 300px;
}
.nav {
width: 100%;
float: left;
}
.nav ul {
list-style: none;
display: block;
width: 100%;
}
.nav ul li {
width: 100%;
float: left;
}
.nav a:link, .nav a:visited {
width: 40%;
padding: 10px 0 0 0;
}
}
I know that it is a lot of code right here but i have been trying to fix it for a few days and i can't find the problem. I also saw that it works mostly on iOS phones. Is it a problem in my code that android does not support?
Based on the extra info, it looks like your background-image is set on <body>. This is all you need:
body {
margin: 0;
min-height: 100vh;
}
Initial answer also contained this relevant part:
Another option is to use flexbox layout:
give your <body> display:flex; flex-direction: column;min-height:100vh;
set flex-grow: 0; on immediate children that you don't want to grow in height
set flex-grow: 1; on immediate children that you want to grow in height.
If you need a more detailed solution you should provide more details about your layout.
Note: Don't forget to prefix flexbox. Use autoprefixer with this setting in Filter (down below): >0%.
I think you need to define the height of the page by targeting html and body like this:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Related
I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:
div {
background-image: url('./images/castle.png'); `I removed this line`
position: absolute;
width: 100%;
height: 100%;
I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
img {
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.bg-container {
position: relative;
width: 100%;
height: 380px;
}
.bg img {
background-image: url('./images/castle.png');
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
z-index: 1;
}
.topnav a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="bg-container">
<div class="bg-img"></div>
</div>
<div class="container">
<h1>Welcome to my page</h1>
<div class="topnav">
Home
About
Contact
</div>
</div>
</body>
</html>
To set the background image you can do in different ways:
One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.
To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 1rem .8rem;
background: #333;
}
.navbar h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
.navbar a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar">
<h1>Welcome to my page</h1>
<div class="nav-links">
Home
About
Contact
</div>
</nav>
</body>
</html>
I'm having trouble aligning my navigation to the top left corner of my site. I know what the issue is, it's that it's in a div with display flex and justify content center. But I cant move it out of the div or it will be above the whole page.
I feel like this must be a simple fix, but I just can't think straight right now. So how could I fix this?
I tried creating a new div outside of the header and one inside but can't fix it.
Here's the site. Thanks
Edit: Forgot about position: fixed lol
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet">
<title>Pink</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#-ms-viewport {
width: device-width;
}
header {
background-color: #fdd1d2;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
border: 4px red solid;
}
.nav {
padding: 1vw;
font-family: 'Crimson Text', serif;
border: 1px green solid;
height: 15vh;
}
.header {
line-height: 100vh;
background-image: url('header.jpg');
background-size: cover;
border: 4px blue solid;
margin-top: 25vh;
height: 50vh;
width: 50vw;
font-family: 'Crimson Text', serif;
font-size: 1.5vw;
/*color: #fdd1d2;*/
}
.text {
/*margin-top: -.75vh;*/
}
ul {
list-style: none;
}
a {
font-size: 1.5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
body {
overflow: hidden;
}
li {
list-style-type: none;
}
/* 6+Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
.text {
font-size: 3vw;
}
#-ms-viewport {
width: device-width;
}
a {
font-size: 5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<header style="
justify-content: space-between;
">
<div class="nav" style="
display: flex;
justify-content: normal;
">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="header" style="
width: 100%;
display: flex;
margin: 100px 300px;
">
<div class="text" style="
/* width: 100%; */
">
<h1>1080 Benchmarks </h1>
</div>
</div>
</header>
</body></html>
You could add this to the CSS for .nav
position: absolute;
left: 0;
That makes it independent from the rest - on small screens it might overlap, but for medium to large screens it's the easiest solution. (BTW: position: fixed has the same effect in this particular situation
Everything else would involve changing your HTML.
#charset "utf-8";
#import url(http://fonts.googleapis.com/css?family=Roboto:200,400,300,500,700);
html {
background: url(img/img1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.top_nav ul {
list-style: none;
background-color: #333745;
text-align: center;
margin: 0;
padding:0;
}
.top_nav li {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #fff;
text-transform: uppercase;
color: #000;;
transition: background-color .5s;
}
.top_nav a {
margin: 1.3em;
text-decoration: none;
font-size: 1em;
color: #fff;
}
.top_nav li:hover {
background-color: #ea2e49;
}
#media screen and (min-width: 600px) {
.top_nav ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.top_nav li {
border: 0;
}}
.box {
height: 300px;
}
.center_elements {
padding: 20px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.center_elements p {
font-size: .9em;
font-weight: 200;
color: #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="top_nav">
<ul>
<li class="home">home</li>
<li class="menu1">menu1</li>
<li class="menu2">menu2</li>
<li class="menu3">menu3</li>
<li class="menu4">menu4</li>
</ul>
</nav>
<div class="center_elements">
<p>text</p>
<button>LEARN MORE</button>
</div>
</body>
</html>
Hi guys.
I'm new to html and css.
I tried to make horizontally and vertically centered elements on the full screen background image.
Here's my code and it's pretty messed up.
Thanks for your comments guys!
Here, Use --> This Fiddle
That should solve your problem!
.center_elements {
background: none;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
First of all I would rather set up image for the background for body tag, not html (it's first time I can see background image for html tag, but might be wrong).
Tip for vertical align:
wrap whole content into wrapper and add css for it display: table, and display: table-cell to child element + height 100vh (vh properites are not fully supported ).
vertical-align: middle always center content exactly in the middle of parent element whatever size it has.
Sample here:
https://fiddle.jshell.net/ajL0tut6/2/
I want to hide the menu only when the screen size 320px is ... Now the menu is always hidden and I need to call them.
when the screen size 320px is, then is ok, when i need to call #main-nav, but by default size must be visible
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
Details
Adresses
Kontakt
</nav>
<div class="page-wrap">
<header class="main-header">
☰
close
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>
First you need the media query (http://jsfiddle.net/3X8Tq/)
#media all and (min-width: 320px) {
#main-nav {
width: 20%;
}
.page-wrap {
width: 80%;
}
}
That works great for small windows, but for large screens the close button doesn't work. This is because the close button never worked. It only works because the CSS is only applying the open :target. So lets make the close button work. We have no open-menu or close-menu ids on the page, but you do have CSS for them.
See the HREF #main-nav points to the nav. there is no #close-menu id. Lets add one.
<div id="close-menu"></div>
And we'll put it before the nav. We will also add the css for #close-menu
#close-menu:target + #main-nav {
width: 0;
}
#close-menu:target ~ .page-wrap {
width: 100%;
left: 0;
}
Solution: http://jsfiddle.net/3X8Tq/1/
Looking at your css I believe you have a misunderstanding of how it works. The subclasses in your css only work with less css library. The #close-menu and #open-menu don't exist on the page. I suggest reading up on :target and css selectors in general.
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.