I'm using a basic template that I ran across. I'm using it internally to display information and I was looking for something with a layout like this.
What I am trying to accomplish is to make the #banner element shorter. Around 300px or any equivalent size. Just not the 700px or so it is now.
Template I am using
Here is the #banner section from style.css
/* Banner */
#banner {
background-color: #6a86b0;
background-image: url("../images/mainHelperBanner.jpg");
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
color: #d8d8d8;
padding: 14em 0;
text-align: center;
position: relative;
}
#banner:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 50%;
background: rgba(64, 72, 80, 0.25);
}
#banner .inner {
position: relative;
z-index: 1;
}
#banner .inner :last-child {
margin-bottom: 0;
}
#banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
color: #ffffff;
}
#banner .button.alt {
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
color: #ffffff !important;
}
#banner .button.alt:hover {
background-color: rgba(144, 144, 144, 0.275);
}
#banner .button.alt:active {
background-color: rgba(144, 144, 144, 0.4);
}
#banner .button.alt.icon:before {
color: #c1c1c1;
}
#banner .button {
min-width: 12em;
}
#banner h2 {
font-size: 3.5em;
line-height: 1em;
margin: 0 0 0.5em 0;
padding: 0;
}
#banner p {
font-size: 1.5em;
margin-bottom: 2em;
}
#banner p a {
color: #ffffff;
text-decoration: none;
}
Here is the html from my index.
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>Integrator</h2>
<p>Teams/sharepoint/tigerpaw/appenate</a></p>
<ul class="actions">
<li>xx</li>
<li>xx</li>
</ul>
</div>
</section>
What I have tried:
After replacing the stock image with a correctly sized one of my own I changed
background-size: cover;
to
background-size: auto;
With no noticable result. Someone suggested it had to do with padding. So I've changed
padding: 14em 0;
to numerous different values and nothing changes. I've also changed the ( banner:before)
height: 50%;
to a few different values and no change.
My css level is intermediate I'd say, I know enough to usually do what I want but in this case I'm stumped. I don't see any other setting that should affect height.
EDIT: It was padding but it was being overwritten by this :
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
As soon as I removed the link to style-xlarge.css it started to listen to the padding settings.
What I don't understand is this. When I first installed this template flask wasn't happy finding those links. It found all the links but not these until the noscript tag was removed.
If this is the full head
<head>
<meta charset="UTF-8">
<title>Transit by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
What is the point of the noscript tags in this case? My understanding is that it provides for when the browser has scripting disabled?
You can change padding to something like this to shorten your #banner section height:
padding: 6em 0em;
Related
I'm looking for a way to keep my footer at the bottom of my page when changing resolution. As you can see it's position is currently fixed but even when changing it to relative it's behaving strangely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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=Outfit:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | QR code component</title>
</head>
<body>
<main>
<article class="card">
<div class="card__img">
<img src="https://i.imgur.com/bzXEqJP.png" alt="QR Code redirecting to the Frontend Mentor website" />
</div>
<div class="card__content">
<h1 class="card__title">Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</article>
</main>
<footer>
<div class="attribution">
Coded by Willson.
</div>
</footer>
</body>
</html>
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
/* html,
body {
height: 100%;
} */
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
:root {
--clr-white: hsl(0, 0%, 100%);
--clr-light-gray: hsl(212, 45%, 89%);
--clr-grayish-blue: hsl(220, 15%, 55%);
--clr-dark-blue: hsl(218, 44%, 22%);
--ff-regular: "Outfit", sans-serif;
--fs-regular: 0.938rem;
--fw-regular: 400;
--fw-bold: 700;
}
/* general styling */
body {
font-family: var(--ff-regular);
font-weight: var(--fw-regular);
font-size: var(--fs-regular);
color: var(--clr-grayish-blue);
background-color: var(--clr-light-gray);
/* specific */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* card styles */
.card {
--content-padding: 1.25rem;
--content-spacing: 1rem;
background-color: var(--clr-white);
border-radius: 1.25rem;
overflow: hidden;
padding: 1rem;
margin: 1.5rem;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
#media (min-width: 600px) {
.card {
width: 330px;
}
}
.card__content {
text-align: center;
display: grid;
padding: var(--content-padding);
gap: var(--content-spacing);
}
.card__content > h1,
p {
line-height: 1.25;
}
.card__title {
font-weight: var(--fw-bold);
color: var(--clr-dark-blue);
}
.card__img > img {
border-radius: 0.75rem;
height: auto;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
I tried changing the position from fixed to absolute but it didn't work as expected.
Thank you & have a nice day.
You can use the above
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
try this :
body {
position: relative;
}
footer {
position: absolute;
/*
Then where you want to put it, for example: bottom: 0;
And of course complete what you want after that...
*/
}
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!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" />
<link
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
I wanted to start creating a simple website and I am working on the navigation bar and the body now.
Here is the code and later on I will explain the issues.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
ISSUE 1:
The links are swapped, no matter what I did. Navigation link 1 and 2 are floated right, but navigation link 1 always ends up on the right, no matter how much I twist and turn the code.
ISSUE 2:
The navigation is clearly outside of the body but it still floats at the right side of the body and not of the entire html tag or the website.
ISSUE 3:
The body appears over the navigation bar, although it should definetely be under it.
This is driving me absolutely insane and i am looking for solutions.
Thanks in advance
You have some elements outside of <body></body>
do you really need float: right for the inside the .navbar?
since you are using percentage dimensions for the body, you'll need specify size of it's parent html element as well.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
/*
#p1 {
float: right;
}
#p2 {
float: right;
}
*/
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
/* added */
#navbar {
display: flex; /* removes gap between children */
}
html
{
width: 100vw;
height: 100vh;
background-color: pink;
}
body
{
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
I have made this website as a practice portfolio website for myself and my website is pushed to the left whenever its smaller than particular size. it used to be around 600px but I removed the whole code and rewrote the website again but I checked it at early phases and still suffers from this problem which I cant find the reason for it. so I stopped coding and came straight here for help.
please help me this is the third time I'm trying to build this website and still have this problem.
something else i noticed is that althoug i have scroll x hidden i still have this tiny scroll to left when resizing the website.enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: rgb(218, 214, 214);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
}
/*NAVBAR----------------------------------------------------------------------------------------*/
.navbar {
width: 100vw;
height: auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
padding: 7px;
background-color: rgba(85, 85, 85, 0.116);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.icon-list li {
text-align: center;
margin: 0 15px;
}
.icon-list a {
text-decoration: none;
color: rgb(180, 148, 158);
}
.icon-list a:hover {
opacity: 0.7;
}
.images {
width: 40px;
height: 40px;
}
/*INFO---------------------------------------------------------------------------------*/
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px;
text-align: center;
}
.info p {
margin: 0 40px;
line-height: 20px;
}
.info h1 {
font-weight: 600;
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
.info h2 {
color: rgb(192, 184, 153);
font-weight: 400;
}
.info h3 {
color: crimson;
font-weight: 500;
margin-top: 30px;
margin-bottom: 10px;
}
.shadow {
width: 80vw;
background-color: rgba(34, 33, 33, 0.336);
padding: 10px;
border-radius: 10px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashkan Naeimipoor</title>
</head>
<link rel="stylesheet" href="./main.css">
<body>
<nav class="navbar">
<ul class="icon-list">
<li><img class="images" src="./images/navbar/home.png" alt=""><br>HOME</li>
<li><img class="images" src="./images/navbar/resume.png" alt=""><br>GET RESUME</li>
<li><img class="images" src="./images/navbar/about.png" alt=""><br>ABOUT</li>
<li><img class="images" src="./images/navbar/contact-book.png" alt=""><br>CONTACT</li>
</ul>
</nav>
<div class="container">
<div class="info">
<div class="shadow">
<h1>Ashkan Naeimipoor</h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for
producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope
while working in the team of experts under a
skillful and talented management.</p>
</div>
</div>
</div>
</body>
</html>
Check your .info class, you are using 100px on padding. That's too large in smaller screen. You can reduce it using media query.
I'll also suggest changing .info class into:
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px 0;
text-align: center;
max-width: 1060px;
margin: 0 auto;
}
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 7 years ago.
I'm a beginner programmer I'm working on a website with my friend Alex, we're both beginners actually, I took on the task of designing the landing page to get some practice in. I want to have these divs which contain nothing but text centered horizontally and vertically (or dead center), I've tried some things other people have suggested on other posts on this site but nothing seems to be working. Could one of you gurus please help me? And thanks in advance :D (I should probably mention that I'm using DW with the Bootstrap framework)
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--GOOGLE FONT-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="background">
<div id="nav">
<ul>
<li> About </li>
<li> Sign up </li>
</ul>
</div>
<div id="welcome">
<p>TEXT I WANT CENTERED</p>
</div>
<div id="best">
TEXT I WANT BELOW CENTERED TEXT
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Heres the css:
#charset "utf-8";
/* CSS Document */
.background {
background: url(../img/bg1.jpg) no-repeat 50% 50% fixed;
margin: 0 auto;
max-width: 80%;
min-width: 50%;
width: 80%;
height:auto;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
}
li {
display: inline;
letter-spacing: 2px;
padding-right: 0.5em;
float: right;
font-size: 125%;
font-style:normal;
font-weight: bold;
text-transform: uppercase;
text-decoration:none;
color:#ffffff;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
}
#welcome {
font-family: 'Montserrat', sans-serif;
max-width: 90%;
min-width: 80%;
height: 50%;
font-size: 350%;
font-style:normal;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
text-align: center;
color:#ffffff;
position: relative;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
z-index: 9998;
}
welcome p {
width: 300px;
height: 100px;
padding: 20px;
}
#best {
font-family: 'Montserrat', sans-serif;
max-width: 100%;
min-width: 70%;
font-size: 200%;
font-style:normal;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
text-align:center;
color:#ffffff;
position: relative;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
}
p {
text-align:center;
}
a {
color: #FFFFFF;
}
a {
hover: #2a7315;
text-decoration: none;
}
Have you tried adding the class text-center to the div?
You can center elements in different ways:
.element {
display: block;
margin: 0 auto;
}
or
.parent {
text-align: center;
}
.child {
display: inline-block
}
or
.element {
position: relative/absolute;
left: 50%;
margin-left: -20px; (usually minus half size of the element)
}
There's a ton of ways to do what you're asking, and I would suggest different ones for different contexts.
I find the simplest way is to create a class like this:
.v-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Then just add it to whatever you want to be centered vertically (div, a, p, span, etc), and to center text you can just use text-align:center;
Add this CSS in your file:
#nav {
float: left;
width: 100%;
}
The following snippet of code works for me:
#welcome, #best{
margin: 0 auto;
}