I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size > 230px, it just bleeds into the second line. Can someone help me?
Here is an image: http://imgur.com/ovT9XM4. How the blue area doesn't snap to the end of the screen.
CSS:
<style>
body {
background-color:black;
margin:0px;
padding:0px;
}
div {
margin:0px;
padding:0px;
}
.header {
color:white;
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
}
.box {
background-color:aqua;
}
#titlebig {
font-weight:normal;
font-size:232px;
text-align:left;
margin-left:-29px;
margin-top:-76px;
}
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
HTML:
<body>
<div class="container-fluid header">
<!-- Grid structure -->
<div class="row row-no-padding">
<div id="titlebig" class="col-xs-12 box">
Let's Create
</div>
</div>
</div>
</body>
You just need to remove margin-left: -29px; from #titlebig. For example:
body {
background-color: black;
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
.header {
color: white;
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial";
}
.box {
background-color: aqua;
}
#titlebig {
font-weight: normal;
font-size: 232px;
text-align: left;
margin-left: -29px;
margin-top: -76px;
}
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid header">
<div class="row row-no-padding">
<div id="titlebig" class="col-xs-12 box">
Let's Create
</div>
</div>
</div>
</body>
Because col-xs-* includes float: left per https://github.com/twbs/bootstrap/blob/3487898a6af8c1d5b12f7b040d30e71b19e34923/less/mixins/grid.less#L24.
If you remove the col-xs-12 class, it will be full width.
With that said, you don't need the row class either. If you are just trying to have a full width div that goes edge to edge and wraps text correctly, you are describing an unstyled block element, of which div is one.
Related
I am trying to make a image responsive by using viewport width instead of pixels (vh) but when i resize the page the text also moves along with the image i tried to fix this by changing the font size of the text that's moving from pixels to vh but it did not work.
I have also the following meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML
<body>
<div id="top">
<div class="kygo">Kygo</div>
<div class="img"> <img src="maskGroup1.png" alt="Profile Picture"></div>
<div class="tag">#000</div>
</div>
<div id="bottom"></div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top{
float:bottom;
background-color:#1A1C1E;
width:100%;
height:200px;
}
#bottom{
position: relative;
float: top;
background-color:#2F3136;
width:100%;
height:1000px;
}
.kygo{
font-family: Segoe UI;
font-weight: 700;
padding-top: 24px;
padding-left: 103px;
color: white;
font-size: 20px;
}
.tag{
font-family: Segoe UI;
font-weight: 400;
margin-top: -40px;
padding-left: 103px;
color: #A2A4A8;
font-size: 13px;
}
img{
max-width: 11.333vw;
max-width: 20vw;
padding-left: 27px;
margin-top: -27px;
}
Thank you for reading.
for responsive image use width in %. And made some changes as follows
html, body {
margin: 0;
padding: 0;
}
#top{
background-color:#1A1C1E;
width:100%;
height:200px;
display: flex;
flex-direction: row;
align-items: center;
}
#bottom{
position: relative;
float: top;
background-color:#2F3136;
width:100%;
height:1000px;
}
.kygo{
font-family: Segoe UI;
font-weight: 700;
color: white;
font-size: 20px;
}
.tag{
font-family: Segoe UI;
font-weight: 400;
color: #A2A4A8;
font-size: 13px;
}
.name {
width:75%;
padding-left:5px;
}
.img{
width:25%;
padding-left:5px;
}
img {
width:100%;
border-radius: 300px;
}
<body>
<div id="top">
<div class="img"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Profile Picture">
</div>
<div class="name">
<div class="kygo">Kygo</div>
<div class="tag">#000</div>
</div>
</div>
<div id="bottom"></div>
</body>
There are a few bugs in the css. As far as I can see, without knowing the idea behind the layout, this is the css with some cleanup.
Note that the size of the image is unkown so it is not clear to me how to give proper margins and paddings.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
overflow: hidden
}
#top {
width:100%;
height:200px;
background-color:#1A1C1E;
}
#bottom {
position: relative;
width:100%;
height:1000px;
background-color:#2F3136;
}
.kygo {
font-family: "Segoe UI", sans-serif;
font-weight: 700;
padding-top: 24px;
padding-left: 103px;
color: white;
font-size: 20px;
}
.img {
max-width: 20%;
padding-left: 27px;
margin-top: -27px;
}
.img img {
/* responsive image */
width: 100%;
height: auto;
border: 0;
}
.tag {
font-family: "Segoe UI", sans-serif;
font-weight: 400;
margin-top: -40px; /* this will partial overlay the top */
padding-left: 103px;
color: #a2a4a8;
font-size: 13px;
}
<!-- this in your <head> section -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this in your <body> section -->
<div id="top">
<div class="kygo">Kygo</div>
<div class="img">
<img src="https://picsum.photos/id/206/150/100" alt="Profile Picture">
</div>
<div class="tag">#000</div>
</div>
<div id="bottom"></div>
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
I have a cityHeader(in this pic it is Los Angeles).
Underneath cityHeader there is div called weatherMain which contains three smaller divs(id=temperature,id=weatherDescriptionHeader and id=documentIconImg
#cityHeader {
float: right;
display: block;
margin: 5px;
font-size: 42px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
}
#weatherMain div {
display: inline-block;
}
#weatherDescriptionHeader {
font-size: 28px;
vertical-align: 50%;
}
#temperature {
font-size: 38px;
vertical-align: 25%;
}
<h1 id="cityHeader"></h1>
<div id="weatherMain">
<div id="temperature"></div>
<div id="weatherDescriptionHeader"></div>
<div><img id="documentIconImg" /></div>
</div>
enter image description heredocumentIconImg).
Three smaller divs should be under cityHeader, positioned next to each other and all aligned to the right.
I tried floating them to the right,adding text-align:right to their parent element(weatherMain), nothing works.
In the pic temperature div is 9 degrees,weatherDescriptionHeader is Clear sky and documentIconImg is icon.
Is this what you're looking for: https://codepen.io/dillonbrannick/pen/XOoNjp
I added in the background colours just so it's easy to identify the elements. Just put your background image into the #weatherMain and remove the other background colours and it should work fine. I added in a margin to #weathermain just to display it within the middle of the page.
Also I added a margin:0 to the h1 tag as h1 automatically adds some css style to it that was interfering.
HTML:
<div id="weatherMain">
<h1 id="cityHeader">Hello World</h1>
<div id="temperature">Howya</div>
<div id="weatherDescriptionHeader">Hola</div>
</div>
CSS:
#weatherMain {
background-color:red;
text-align: right;
margin: 10% 20% 10% 20%
}
#cityHeader {
background-color:yellow;
}
h1{
margin:0;
font-size:45px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#temperature {
background-color:green;
font-size: 38px;
}
#weatherDescriptionHeader {
background-color:lightblue;
font-size: 28px;
}
Try this:
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
float: right
}
I creating a page and was lost when I noticed that when I increase or decrease the font size of the header, the surrounding space increases in a drastic size. I don't have a padding for the h1 tag, but it looks like it is being added. I tried removing the padding for the nav, but it is only affecting the nav text itself, not the extra space that's bothering me.
Here is the code:
body {
margin: 0;
font-family: Caviar, "Times New Roman", sans-serif;
float: clear;
text-align: center;
}
#main {
width: 100%;
padding: 0;
}
/* start the whole heading section */
h1 {
font-size: 5em;
color: #000000;
font-family: "Alex Brush", "Times New Roman", sans-serif;
padding-left: 2%;
float: left;
}
nav h2 {
font-weight: normal;
}
nav {
float: right;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.1em;
/*padding-top: 5.2%;
padding-right: 2%;*/
}
nav a {
color: #000000;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
nav a:visited {
color: #000b26;
}
#header {
background-color: #FF6978;
display: block;
width: 100%;
text-align: left;
position: fixed;
overflow: hidden;
top: 0;
z-index: 999;
box-shadow: 5px 6px 5px #000000;
}
/*end heading section*/
#container {
margin: 0 auto 0 auto;
margin-left: 0 auto;
width: 96%;
margin-top: 13%;
}
.small_head {
font-family: Capsuula, "Times New Roman", sans-serif;
font-size: 2.2em;
border: 3px solid #FFFF61;
padding: .5% 5% .5% 5%;
display: inline-block;
margin: 0 auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Checking Head</h1>
<nav>
<h2>
Navigator
</h2>
</nav>
</div>
<!--close header-->
<div id="container">
<div class="small_head">Small Head</div>
</div>
<!--close container-->
</div>
<!--close main-->
</body>
</html>
Please help!
Note: I have embedded fonts in another css, so please ignore the fonts.
Thank you
This is because the <h1> tag naturally has a margin applied on it scaling with font-size. You want this in your css:
h1 { margin:0 }
The h1 element has margin that is related to the font size via em. If you increase the font size, em is relative to the font size and, thus, margin is increased.
Or you can use max-height: <number of pixels> px instead of h1 { margin:0 } and you will not affect the h1 margins.
I want this layout:
So I tried this:
<h2>Make search awesome using Open Source</h2>
.banner .section_title h2 {
font-family: "Oswald", Arial, sans-serif;
font-size: 5em;
line-height: 1.4em;
text-transform: uppercase;
overflow: hidden;
text-align: center;
display: inline;
padding: 0 30px;
background: #176072;
}
But I am getting this result:
So, I want to add that padding (the red circle). How can I do that?
For the responsive design, I want this result:
Here's one solution. Wrap the components that you want on separate lines with a span or div element. This will you to style the sections of text independently but keep the full text within a heading tag.
<h2><span>Make Search Awesome Using</span> <span>Open Souce</span></h2>
h2 span {
font-family: "Oswald", Arial, sans-serif;
font-size: 3em;
line-height: 1.4em;
text-transform: uppercase;
padding: 0 30px;
background: #176072;
color: #FFFFFF;
display: inline-block;
}
h2 {
background-color: #062949;
padding: 25px;
text-align: center;
}
jsFiddle: http://jsfiddle.net/vcpo5rmj/
Note: This is not a complete responsive solution.
To dynamically keep the padding on your text you need to use the CSS outline property:
body {
background-color: #033569;
}
.container {
text-align: center;
}
h2 {
display: inline;
text-transform: uppercase;
background-color: #176684;
color: white;
font-family: sans-serif;
outline: 5px solid #176684;
}
<div class="container">
<h2>Make search awesome using Open Source</h2>
<p>Click Full Page button then resize the browser</p>
</div>
Or view the example and adjust the container width in this fiddle.
Container width at 200px below:
Oh just use CSS3 box shadows to emulate the padding on either side of each line:
body {
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #003366;
}
.section_title {
text-align: center;
}
.section_title h2 {
display: inline;
font-size: 3em;
background: #176072;
box-shadow: -.5em 0 #1D758C, .5em 0 #1D758C;
}
<div class="section_title">
<h2>Make search awesome using Open Source</h2>
<p>A different color box-shadow is used for illustration.</p>
</div>
best i could do https://jsfiddle.net/tonytansley/91j10osv/3/ - not responsive sorry
<div class="banner">
<div>
<h2>Make search awesome using</h2>
<h2>Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using <br/>
Open Source</h2>
</div>
</div>
<hr/>
<div class="banner">
<div>
<h2>Make search awesome using<em></em><br/>
<em></em>Open Source</h2>
</div>
</div>
css
.banner div{
text-align:center;
}
.banner h2, .banner p{
font-family:"Oswald", Arial, sans-serif;
font-size: 2em;
line-height: 1.4em;
text-transform:uppercase;
text-align:center;
display: inline;
padding: 0 30px;
background: #176072;
color:white;
}
.banner h2:first-of-type{
margin-bottom:0.2em;
}
em{
width:30px;
display:inline-block;
}
try this
html code...
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="holder">
<h2> Make search awesome using </h2>
<h2> Open Sources </h2>
</div>
</body>
</html>
css code
body{
margin:0;
}
div.holder{
width:auto;
height: auto;
text-align: center;
}
div.holder h2{
font-family:"Oswald", Arial, sans-serif;
font-size: 4.5em;
text-transform:uppercase;
background: #176072;
display: inline;
line-height: 80px;
}