I have created a website using node js and html. When i look at the website on my phone, I have to zoom in in order to see it. Is there any code I can put in my css where I can fix the website content to adjust to the size of the window/browser?
/*Styles the Webpage*/
h1 {
color:black;
font-family: Georgia;
line-height: 1.4;
font-weight: normal;
font-stretch: normal;
font-variant: small-caps;
font-size: 36px;
text-align: center;
padding: 35px;
}
label {
position: relative;
float: left;
text-align: left;
font-size: 18px;
color: black;
}
input[type=submit] {
width: 5em; height: 1.5em;
align: center;
}
input[type=number] {
width: 8em; height: 1.5em;
}
div {
border: 1px solid black;
box-sizing: border-box;
padding: 25px;
}
body {
background-color:#c7c9c7 ;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 60px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #8a8d8f;
}
.active {
background-color:#002B7F ;
}
img {
position: fixed;
width: 190px;
height:50px;
left: 40px;
top: 40px;
}
You need to make your website responsive. This you can do it with CSS media queries and add to head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Put this code into the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It will cause every device to show the real pixel sizes of your elements.
Related
I'm new to css/html and I still don't know how to center the text when hovering. So I have a project on my subject to create a simple website. And so far I'm starting with the header. I'm having this one problem where I can't center the text everytime i hover my mouse to the menus. Here is the image and my code.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 100px;
display: block;
padding: 10px 70px;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Help please : (
so many issues, and no need for such things, as long as u set one you dun have to set other, anyway I have just set the fix on the same code, you have to use li a or nav a, as long as they both are doing the same in your case, so I removed one of them both and you set padding-left: 70px, which I removed and added to the width of the buttons
check the snippet
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 170px;
display: block;
padding: 10px 0;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive. This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive.
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
#media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
#media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}
You can use bootstrap image responsive class.
<img src="images/logo.png" alt="logo" class="img-responsive"/>
And for H1 tag you can use media query to make it responsive font size.
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" />
<h1>Logo Goes here</h1>
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
Make sure the media query css should be below the main css then it will work, Sequence is matter.
Hope this helpful.
/*Desktop responsive*/
.logo-img {
width: 260px;
}
h1 {
font-size: 58px !important;
line-height: 80%;
margin-top: 10px;
}
/* Mobile Phone Responsiveness */
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 9px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 8px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 160px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
<!DOCTYPE html>
<html lang="sh">
<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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Frigo MMB</title>
</head>
<body>
<!-- header -->
<div class="container">
<div class="row top-row">
<div class="col-md-6">
<img src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png" alt="logo img" class="logo-img">
</div>
<div class="col-md-6">
<h1>Hladjenje & <span style="color: #5d75ab">Klimatizacija</span></h1>
<h2>011.8525636 | 063.7591345</h2>
</div>
</div>
</body>
</html>
May some of the existing code overwriting your h1 tag so i have added !important it will help overwrite the other h1 class.
Hope this snippet will help you.
You can try something like this, if image have width of 400px, then use:
#media screen and (max-width: 400px) {
img {
width: 100%;
}
}
You may need to use different selector for img, same that set the width in your other CSS if you set it.
With header you can put it above the image if it's next to image on desktop.
I'm brand-new to html and decided to make a start page for Firefox. The problem I have is that when I mouseover above and below my links' text my mouse's cursor changes to the hotlink pointy hand, as it would normally when you mouseover a link. But it does this within a 20+ pixel radius above and below that link in an invisible field it would seem. It doesn't do this to the left and right of the link text. I want to fix it so that it only changes when my mouse is directly over the text, as all website links do. I'm probably missing some code. Here's my full html code. Any help is greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="name">
<title>~name#inferno</title>
<link href="favicon.ico" rel="icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style type="text/css">
body {
background: url(x.jpg) no-repeat;
background-size: cover;
background-color: #0A0F14;
-moz-appearance: none;
}
td {
transition: all 2s ease 0.9s;
color: inherit;
-moz-appearance: none;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
a:active {
color: inherit;
text-decoration: none;
}
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: -3px;
}
td:hover{
background: rgba(16, 21, 27, 0);
}
.box {
background: #10151B;
border-radius: 0px 0px 15px 10px;
line-height: 50px;
width: 140px;
height: 592px;
position: fixed;
top: 1px;
bottom: 0px;
left: 0px;
}
.icon {
color: #D12248;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon2 {
color: #D19011;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon3 {
color: #57A3D1;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon4 {
color: #AAD130;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon5 {
color: #4ED1B3;
float: left;
margin-top: 10px;
text-indent: 5px;
}
.icon6 {
color: #98D1CE;
float: left;
margin-top: 10px;
text-indent: 5px;
}
Seems like your issue was the 'float:right' in the CSS.
That made the a element take up all the space of the box.
Try setting a line height so that the 'a' element will be limited in height:
a {
font-family: "Segoe UI";
font-size: 12px;
font-weight: bold;
outline: none;
float: right;
margin-right: 15px;
margin-top: 10px; //updated the margin top
line-height: 15px; //added line height
}
The line-height change makes it so the a appears in the top of the row.
Updating margin-top fixes that.
https://jsfiddle.net/aw09geqh/1/
Try to remove this rule:
td:hover{
background: rgba(16, 21, 27, 0);
}
It's hard to say without seeing the HTML, but from what you write, that might be it.
I have a problem with my responsive menu and I can't figure out where is it.
It's hard to explain so go to my website http://untruste.altervista.org/home.html
Now resize the windows since you get the responsive version, open the menu and the close it.
Resize the window since you get the desktop version, as u can see the menu disappeared! (If you refresh the page it comes back)
desktopstyle:
header {
padding-bottom: 2%;
border-radius: 10px;
width: 70%;
margin: auto;
}
#headerTitle h1{
display: block;
}
#headerTitle {
padding-top: 1%;
text-align: center;
line-height: 1.8em;
}
header img {
display: block;
margin: 2%;
width:7em;
}
header h1 {
width: 80%;
margin: auto;
font-size: 1.8em;
letter-spacing: -0.04em;
}
header h2 {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5em;
letter-spacing: -0.06em;
}
#menu {
display: block;
width: 80%;
margin: auto;
border:none
}
#menu ul li {
display: inline-block;
width:auto;
margin-left:auto;
margin-right: auto;
padding:2px;
border: none;
font-size: 0.9em;
}
#selected {
background: #00715f;
padding:0 1em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 70%;
padding-top: 1%;
border-radius: 10px;
font-size: 0.9em;
}
article a {
color: #004040
}
article h1 {
padding: 7px 7px 7px 30px;
width:auto;
margin-left: -30px;
margin-right: 30%;
text-align: left;
}
article h2 {
margin-left: -30px;
margin-right: 60%;
}
.articleText {
width:70%;
margin:auto;
}
#linkmap {
display: none;
}
iframe {
display: block;
border: none;
}
footer {
width:70%;
margin: auto;
border-radius: 10px;
font-size: 0.9em;
font-family: Times, serif;
}
mobilestyle
body {
}
header {
}
footer {
font-size: 0.7em;
}
#headerTitle h1{
display: none;
}
.icon {
margin-right:10px;
font-size:2em
}
.icon::after
{
content:'≡';
}
.icon-close::after
{
margin-right:10px;
font-size:2em;
content:'×';
font-weight: normal;
font-style: normal;
}
#headerTitle {
padding-top: 5px;
}
header img {
display:none
}
header h1 {
font-size: 1.4em;
letter-spacing: -0.04em;
}
header h2 {
font-size: 1.1em;
}
#menu {
border-bottom: 1em solid #00715f;
}
#menu ul li {
display: block;
height:2em;
width:100%;
margin-left:-3.5%;
font-size:1.2em
}
.menu_button {
display: block;
text-decoration: none;
text-align: right;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
background: #00715f;
color: #ececec;
}
#selected {
background: #00715f;
padding:0 5em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 100%;
font-size: 0.8em;
}
article h1 {
width:100%;
margin-right: 20%;
padding:7px 0 7px 0;
text-align: center;
}
article h2 {
margin-right: 10%;
}
.articleText {
width:90%;
margin:auto
}
#linkmap{
display: block;
border: none;
}
iframe {
display: none;
}
style:
body {
background:#004040;
color: #005b4d;
text-align: center;
font-family: "Georgia", "Times", serif;
}
a {
color: #00715f;
}
a:hover {
font-style: italic;
}
header {
background: white;
width: 100%;
height:auto
}
header h1,h2 {
display: block;
font-weight: normal;
}
footer {
background-color: #ffffff;
width: 100%;
padding: 2% 0;
}
#menu ul li {
list-style: none;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: #005b4d;
}
article {
background: white;
text-align: justify !important;
padding-bottom: 1%;
margin: 5% auto;
}
article h1 {
background: #00715f;
color: #fff;
width:100%;
margin-right: 20%;
text-shadow: 0 1px 0 #403232;
font-weight: normal;
text-align: center;
}
article h2 {
background: #00715f;
color:#fff;
padding: 7px 7px 7px 30px;
font-weight: normal;
font-size: 1.2em;
}
This the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media= "(min-width: 240px) and (max-width:1023px)" type="text/css"
href="css/mobilestyle.css">
<link rel="stylesheet" media="(min-width:1024px)" type="text/css" href="css/desktopstyle.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="script.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>ArteLab Responsive</title>
</head>
<body>
<header>
<img style="float:left" src="logos/artelab.png" alt="logo_artelab">
<img style="float: right" src="logos/insubria.png" alt="logo_insubria">
<div id="headerTitle">
<h1>Applied Recognition Technology Laboratory</h1>
<h2>Department of Theoretical and Applied Science</h2>
</div>
<a class="menu_button" href="#"><span class="icon">≡</span> </a>
<div id='menu'>
<nav>
<ul>
<li>LINK1</li>
<li>lINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li><a id="selected" href="link">LINK6</a></li>
</ul>
</nav>
</div>
</header>
and this is the script I use to open the menu in the responsive version
jQuery(document).ready(function() {
$('.menu_button').click(function() {
$("#menu").slideToggle();
$(this).find('span').toggleClass('icon icon-close');
});
});
You can try this:
In your desktop styles just do :
#menu {
display: block!important;
}
Your slideToggle() to the menu is causing it to have display:none in the style attribute. So we just overwrite that in desktop.
I'm trying to get my background image to show at the top center of the page. The image works fine if I do:
<style>
body {
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
}
</style>
I can't seem to work out where I've gone wrong. There must be something I've managed to mess up, I just can't see it. Here is the CSS:
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
/* Typography */
.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}
.header h1 em {
font-size: 1.200em;
font-style: normal;
}
h1 {
font-size: 2.2em;
color: #fff;
}
.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}
.content h2 em {
font-size: 1.2em;
font-style: normal;
}
.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}
.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}
#banner p {
text-align: center;
}
/* Navigation */
#nav {
margin: 4px 4px 40px;
}
#nav ul {
padding: 0;
margin: auto;
list-style: none;
}
#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}
#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}
#nav ul li a:hover {
background: #e0d0e0;
}
/* Content */
.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}
.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}
.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}
div#about {
padding:25px;
min-height: 255px;
}
img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}
div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}
#media screen and (max-width: 650px) {
.container {
width: 90%;
max-width: none;
}
div#footer {
width: 90%;
}
}
Try to change your path for example:
background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;
Because you are in a subfolder, you have to go up of a level I think
Most likely your css file is in a different folder and therefore needs another path to the image file.
The common way is to put css in a separate css/* folder, so the path should be:
url('../img/top_logo_blank_small.png')
This CSS seems to work fine, are you certain that the image exists?
http://jsfiddle.net/ghsNR/
I've just tried it here and it works fine with an image from http://placehold.it/
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}
The most likely cause after observing this is that your CSS isn't actually locating your image correctly. I suggest using tools like the Chrome dev tools, or Firebug to inspect the absolute path that the browser is trying to use to load the image and moving forward from there.
Is the css in the same folder as the page? If you have a different folders, you need to change the URL accordingly.
Maybe change the URL to
'../img/top_logo_blank_small.png'