I want to hide the href link attachment to my browser link when I click on each href. For example, when I click on the href="dummy1" I don't want it to show mydomain.com/#dummy1. I want to hide the #dummy1 part. Hope this question makes sense.
Each hypertext scrolls down to a different part of my page.
Here is my CSS and HTML code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll">About Me</li>
<li class="page-scroll">Portfolio</li>
<li class="page-scroll">Contact</li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
This can be achived by setting the href property to href="" and by attaching a onClick event to the <a> tag to redirect the link after clicking.
In the end, it should look like this:
Your text.
For this case you can use JavaScript. Bind your link to a clickevent and set the link target via JS and jump there. This way you can manipulate the link as you like.
function jump (target) {
window.location = '#' + target;
return false;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy1">About Me</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy2')" href="dummy2">Portfolio</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy3">Contact</a></li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
Related
I don't have an idea of how am I supposed to make the menu show with an animation. I want it to slide in down and back up on toggle. I'm down for any kind of solution.
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})
* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
.rodzicnav {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
.navbar {
background-color: rgb(31, 31, 31);
align-items: center;
color: white;
display: flex;
justify-content: space-around;
font-size: 18px;
}
.primary-icon {
height: 30px;
}
.lista-nav {
list-style-type: none;
}
.lista-nav .elementlisty {
display: inline-block;
padding: 20px;
}
.navbar a {
color: white;
text-decoration: none;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.menu {
display: none;
}
.menu-line {
width: 25px;
height: 3px;
background-color: white;
margin-bottom: 4px;
}
#media all and (min-width: 480px) {
.navbar {
flex-direction: column;
}
.menu {
display: block;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
list-style-type: none;
width: 100%;
text-align: center;
padding-top: 15px;
display: none;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
display: block;
}
}
<!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">
<!-- FONT -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<!-- -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="rodzicnav">
<nav class="navbar">
<div class="logo-kontener">
<img class="primary-icon" src="obrazy/logo.png" alt="">
</div>
<ul class="lista-nav" id="navi-lista">
<li class="elementlisty grow">
O nas
</li>
<li class="elementlisty grow">
Realizacje
</li>
<li class="elementlisty grow">
Kontakt
</li>
</ul>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
</div>
</body>
</html>
I tried watching youtube tutorials, look for some anwser at freecodecamp and w3s.
I'm also kind of new to responsive website designs, so I appreciate your help.
You can try to use max-height as property to animate:
#media all and (max-width: 480px) {
.navbar {
position: relative;
padding: 10px 15px;
}
.menu {
display: block;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
transition: max-height .3s;
list-style-type: none;
width: 100%;
text-align: center;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(31, 31, 31);
max-height: 0;
overflow: hidden;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
max-height: 500px;
}
}
So I am new to web development and was trying to practice by making a portfolio for myself but I ran into a slight issue. It seems that when a set margin-top to a divider, my navigation bar shifts a bit to the right.
So for some reason, when I apply "margin-top: 300px;" to the ".header" class, my navigation bar shifts to the right a bit.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', 'sans-serif';
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-padding-top: 1rem;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 10px;
cursor: pointer;
}
.nav-header {
color: var(--text-color);
}
.nav-header h2 {
font-weight: 500;
margin: 0;
padding: 0;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
font-weight: 500;
}
nav ul li a {
color: var(--text-color);
transition-duration: 0.7s;
}
nav ul li a:hover {
color: var(--text-highlight)
}
nav ul li a:active {
color: var(--text-active);
}
nav ul li a span {
color: var(--text-active);
}
:root {
--text-color: #000000;
--text-highlight: #D3D3D3;
--text-active: #6b84d1;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.header {
text-align: center;
margin-top: 300px;
;
}
.header h1 {
color: rgb(255, 100, 0);
font-size: 64px;
}
.header p {
font-weight: 500;
font-size: 36px;
}
.header hr {
margin-top: 225px;
}
<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>Kelvin Kuoch | Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d4a6ce6cea.js" crossorigin="anonymous"></script>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<div class="container">
<div class="navbar">
<a class="nav-header">
<h2 onclick="scrollToTop()">Kelvin Kuoch</h2>
</a>
<nav>
<ul>
<li><a><span onclick="scrollToTop()" class="homeBtn">Home</a></span>
</li>
<li>Work</li>
<li>About</li>
</ul>
</nav>
<hr id="nav-div">
</div>
<div class="header">
<h1>Hello!</h1>
<h2>I'm Kelvin, a <br> highschool student <br> based in Australia.</h2>
<hr>
</div>
<div class="mid-container" id="my-work">
<h1>My Work</h1>
</div>
</div>
</body>
I think there is problem with your .navbar class; when I remove the extra margin it showing well:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 0px;
cursor: pointer;
}
Before removing the margin:
After removing it is fine now:
But I suggest you to use Bootstrap navigation which are fully responsive.
In my html file I have header and inside it there is ul>li>a menu
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
transform: translateY(30%);
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
height: 100vh;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
But here is a thing
Look here
1st there is a little margin-left for the menu and second more serious problem margin-top and in not media query code I dont added margin-top or margin-left.
Happy new year from Armenia ;p. Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow?
OK—a few minor changes here, but is working. Most have to do with element positioning.
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
top: 28px;
left: 0;
right: 0;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
Nothing I try to find online works. When I hover over the link it goes to the link and the url changes but it doesn't move the page. I'm using chrome up to date.
Here is the code:
Edit: Apparently it has something to do with the CSS because when I took the CSS out it started to work, but I don't know why
$('.scroll').localScroll();
body {
margin:0;
color: #222;
background-color: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
overflow-y: scroll;
overflow-x: hidden;
}
html, body {
width: 100%;
height: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header::after{
content: '';
display: table;
clear: both;
}
#down{
filter: brightness(0) invert(1);
width: 3%;
height: auto;
position: absolute;
top: 50; bottom:0; left: 0; right:0;
padding-bottom: 20px;
margin: auto;
}
.movetobot{
height: 200vh;
}
section h1{
color: #fff;
position: absolute;
text-align: center;
top: 110%;
width: 100%;
line-height: 0.4em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.center{
text-align: center;
}
header {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
color: white;
float: left;
font-family: 'Roboto', sans-serif;
}
.btext{
font-family: 'Roboto', sans-serif;
color: #f9f3f4;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
line-height: 0.4em;
}
h1{
font-size: 50px;
}
.btn{
color: #fff;
font-family: 'Roboto' sans-serif;
font-weight: 300;
text-decoration: none;
border: #ccc 1px solid;
padding: 10px 15px;
border-radius: 8px;
line-height: 4em;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 85px;
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #ecf0f1;
}
nav a::after{
margin-top:5px;
content: '';
display: block;
height: 5px;
width: 0%;
background-color: black;
position: absolute;
transition: all ease-in-out 350ms;
}
nav a:hover::after {
width: 100%;
}
.btn:hover{
color: #b19295;
border: #fff 1px solid;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/hover.css" rel="stylesheet" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/icons8-home-24.png">
<title>Royal Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<div class="container">
<h2 class="logo">R O Y A L</h2>
<nav class="scroll">
<ul>
<li>Home</li>
<li>Offering</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <hr width="100%"> -->
<a href="#services">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/634848-200.png" alt="down" class="hvr-hang" id="down">
</a>
<div class="btext">
<h1>ROYAL SERVICES</h1>
Discord
</div>
</div>
<div id="services">
<section class="movetobot">
<h1>Services</h1>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js></script>
<script src="js.js"></script>
</html>
Set the "id" to page part tag where you want to move.
<div id="someIdName"></div>
It's because your content in <div id="first"> is either floating or position absolute that div have no high so <div id="services"> takes all of the page. When you click the link the page is already there.
What you can do is give min-height to <div id="first">.
What i would do is to structure the HTML in better way and remove all floats and absolute positions.
What I should do to this page: to work right in mobile. I have tried meta viewport but It doesn't work. You can find the page here:
and html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="english.css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header class="mainHeader">
<ul>
<li>Magazine</li>
<li>About</li>
<li>Archive</li>
<li>Books</li>
<li>Contact</li>
</ul>
</header>
<section class="wr">
<img src="images/right.png" class="right">
<img src="images/left.png" class="left">
<section class="wrapper">
<div class="container">
<h1>Photographer</h1>
<h1>Story</h1>
<p>DescriptionDescriptionDescription</p>
</div>
</section>
</section>
</body>
</html>
and css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
}
body{
color: rgba( 255, 255, 255, 0.9 );
font-family: Helvetica, sans-serif;
background-image: url("images/14thcover.jpg") ;
background-size: 100%;
background-repeat: no-repeat;
}
a:hover{
color: black;
}
.mainHeader {
float: right;
font-size: 1.3em;
margin-right: 0.8em;
margin-top: 2em;
line-height: 1.2;
}
ul {
list-style-type: none;
}
.mainHeader a{
color: rgba(255,255,255,0.9)
}
.mainHeader a:hover {
color: rgba(255,255,255,0.7)
}
.wr {
width: 75%;
height:60%;
min-height: 65%;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.right {
position: absolute;
top: 49%;
right: 0;
}
.left {
position: absolute;
top: 49%;
left: 0;
}
.wrapper {
width: 80%;
height:auto;
background-color: white;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.wrapper ul li{
list-style-type: none;
display: inline;
font-size: 2em;
}
.title {
color: red;
}
.name, .lead {
color: black;
}
.lead {
font-size: 1.3em;
}
.container {
width: auto;
top: 35%;
left: 50%;
position: absolute;
overflow: auto;
transform: translate(-50%, -50%);
direction: rtl;
font-weight: 80;
}
.container h1 {
display: inline;
font-weight: 100;
font-size: 2em;
margin-bottom: 1em;
}
.container p {
margin-top: 1em;
text-decoration: none;
}
That works as you have specified in your CSS. The problem is that these specific widths do not fit in smaller resolutions on the device screen without overlapping.
You must specify:
#media (max-with: 768px) {
.mainHeader {
float: none;
}
}
You can reduce sizes and font sizes to still have the same look as in greater resolutions, but text become not readable or clickable
Meta will work after reading this https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive