The mighty Boosh
Well-Known Member
Hey guys
Sorry for the two part question but places like stack exchange where alittle too much for a casual hobbyist . Would anyone know of a website that a beginner would be welcome to ask simple programming questions ?
My issue html , css
I've followed this tutorial Fixed Header with html and css | Collapsing Header Tutorial
It looks and works grate on a desktop but the content-area and sometimes the header throw a wobbler when tested on tablets and phones . Tho it's mainly the content area that fails to stretch the width of the screen .
HTML
CSS
Have poked around but feel it's something that needs adding rather then alterd - just unsure what to call things when looking other then responsive .
Sorry for the two part question but places like stack exchange where alittle too much for a casual hobbyist . Would anyone know of a website that a beginner would be welcome to ask simple programming questions ?
My issue html , css
I've followed this tutorial Fixed Header with html and css | Collapsing Header Tutorial
It looks and works grate on a desktop but the content-area and sometimes the header throw a wobbler when tested on tablets and phones . Tho it's mainly the content area that fails to stretch the width of the screen .
HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Header with html and css | Collapsing Header Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="box-area">
<header>
<div class="wrapper">
<div class="logo">
<a href="#">MouriThemes</a>
</div>
<nav>
<a href="#">home</a> <a href="#">about</a> <a href="#">portfolio</a> <a href="#">services</a> <a href="#">contact</a>
</nav>
</div>
</header>
<div class="banner-area">
<h2>this is banner</h2>
</div>
<div class="content-area">
<div class="wrapper">
<h2>content area</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, esse est iste magni reprehenderit saepe sint! Assumenda consectetur fugit sit tempore. Architecto blanditiis deleniti, est fuga iusto perspiciatis suscipit voluptatibus! Ad alias assumenda autem deleniti esse est excepturi hic itaque, magnam magni nam officia provident quae recusandae reiciendis rem sed. Adipisci animi aut autem deserunt dolore, ea eius error ex facilis inventore ipsum minus modi nihil nostrum nulla, obcaecati porro reprehenderit repudiandae sed sint sunt tempore vero. At dolores doloribus, dolorum ea eaque hic ipsa iusto libero minus natus neque nisi nobis nostrum odio optio pariatur perspiciatis praesentium rerum sapiente.</p>
</div>
</div>
</div>
</body>
</html>
CSS
Code:
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
.wrapper {
width: 1170px;
margin: 0 auto;
}
header {
height: 100px;
background: #262626;
width: 100%;
z-index: 10;
position: fixed;
}
.logo {
width: 30%;
float: left;
line-height: 100px;
}
.logo a {
text-decoration: none;
font-size: 30px;
font-family: poppins;
color: #fff;
letter-spacing: 5px;
}
nav {
float: right;
line-height: 100px;
}
nav a {
text-decoration: none;
font-family: poppins;
letter-spacing: 4px;
font-size: 20px;
margin: 0 10px;
color: #fff;
}
.banner-area {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-image: url(https://i.postimg.cc/T3B3WFcv/2.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}
.banner-area h2 {
padding-top: 8%;
font-size: 70px;
font-family: poppins;
text-transform: uppercase;
color: #fff;
}
.content-area {
width: 100%;
position: relative;
top: 450px;
background: #ebebeb;
height: 1500px;
}
.content-area h2 {
font-family: poppins;
letter-spacing: 4px;
padding-top: 30px;
font-size: 40px;
margin: 0;
}
.content-area p {
padding: 2% 0px;
font-family: poppins;
line-height: 30px;
}
Have poked around but feel it's something that needs adding rather then alterd - just unsure what to call things when looking other then responsive .