I created a simple page with Bootstrap and would like to have my blockquotes (including the left quotation mark added with a CSS pseudoselector) centered on while being mobile responsive.
Additionally, I tried setting the blockquote to have a width of 500px in CSS, and it made it look right on my laptop, but caused the quote text to go off the page on mobile rather than scaling down. So I removed the width declaration.
Here's my current CSS for the blockquote and corresponding quotation mark:
blockquote {
font-family: Georgia, serif;
font-style: italic;
margin: 3em auto;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
add display: inline-block;text-align: left; to blockquote and also text-align: center; to .jumbotron in css:
body {
margin-top: 3em;
font-family: Helvetica;
}
h1 {
text-transform: uppercase;
}
img {
width: 90%;
}
.panel img {
height: 400px;
width: auto;
}
.panel h4 {
font-size: 10px;
}
.jumbotron {
text-align: center;
}
.jumbotron blockquote {
font-family: Georgia, serif;
font-style: italic;
margin: 3em auto;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
display: inline-block;
text-align: left;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
ul {
list-style: none;
text-align: left;
/* Bottom set to 3em to match margin above ul created by blockquote */
margin: 0 auto 3em auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Hume</title>
<!-- Ensures proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
<div class="container">
<!-- Big grey box for calling extra attention to content -->
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<h1>David Hume</h1>
<h4>Scottish Enlightenment Philosopher, Historian, Economist, Essayist</h4>
<div class="thumbnail">
<img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
<div class="caption">"Portrait of David Hume," 1754, by Allan Ramsay</div>
</div>
</div> <!-- End of text-center div -->
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
</div> <!-- End of col-xs-12 div -->
</div> <!-- End of row div -->
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<h4 class="text-center">A brief timeline in events of David Hume's life:</h4>
<ul>
<li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
<li><strong>1713</strong> – Father dies</li>
<li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
<li><strong>1734</strong> – Changes surname to Hume</li>
<li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
<li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
<li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
<li><strong>1776</strong> – Dies at the age of 65</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Works</h3>
</div>
<div class="panel-body">
<div class="row text-center">
<div class="col-md-6">
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
<br><br>
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
</div>
<div class="col-md-6">
<h5>Dialogues Concerning Natural Religion</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="Dialogues Concerning Natural Religion">
<br><br>
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<blockquote>
<p>Were it not for his infidel writings, every body would love him.</p>
<footer class="blockquote-footer"><cite>James Boswell</cite></footer>
</blockquote>
<h4 class="text-center">Learn more on Wikipedia.</h4>
</div>
</div>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by Natalie Cardot</p>
</footer>
</div>
</body>
</html>
Related
div class container is used to wrap all other items of the web page, I want to align this container centrally but can't seem to figure out why it isn't working.
edit: I would like the container itself center on the viewpoint and then I want to individually align the items within their own containers.
edit 2: I have figured it out, thanks for everyone's responses. I changed the HTML selector to the body, then changed the display to flex and finally justify-self to align-items.
* {
margin: 0;
padding: 0;
}
html {
display: block;
flex-direction: column;
width: 100%;
justify-self: center;
}
h1 {
text-align: center;
}
.sub {
position: absolute;
}
.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
display: inline-flex;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Notable|Work+Sans&display=swap" rel="stylesheet">
</head>
<h1 id='main_title'>Website Style Specification - 1</h1>
<body>
<div class='container' id='color_container'>
<h2 class='sub'>Colours</h2>
<div class='color_box' id='color_one'>
<p>Coal</p>
<p>#252525</p>
<p>Background Colour</p>
</div>
<div class='color_box' id='color_two'>
<p>Blood</p>
<p>#ff0000</p>
<p>Text colour</p>
</div>
<div class='color_box' id='color_three'>
<p>Crimson</p>
<p>#af0404</p>
<p>Borders ad foreground colouring</p>
</div>
<div class='color_box' id='color_four'>
<p>Slate</p>
<p>#414141</p>
<p>Element background</p>
</div>
</div>
<div class='container' id='font_container'>
<h2 class='sub'>Fonts</h2>
<div class='font_box' id='font_1'>
<h3>Notable</h3>
<p class='normal'>This is how the text will display on the website.</p>
<p class='italic'>This is how the text will display on the website.</p>
<p class='bold'>This is how the text will display on the website.</p>
</div>
<div class='font_box' id='font_2'>
<h3>WorkSans-Regular</h3>
<p class='normal'>This is how the text will display on the website.</p>
<p class='italic'>This is how the text will display on the website.</p>
<p class='bold'>This is how the text will display on the website.</p>
</div>
</div>
<div class='container' id='text_styles'>
<h2 class='sub'>Text styles</h2>
<div class='text_box' id='text_1'>
<h3 id='sub_headings'>This is a sub heading</h3>
<ul>
<li>HTML: h2</li>
<li>font family: Notable</li>
<li>Font weight: 28px</li>
<li>Text decoration: underline</li>
</ul>
</div>
<div class='text_box' id='text_2'>
<p id='text'>
<ul>
<li>HTML: p</li>
<li>font family: Work sans</li>
<li>font weight: 18px</li>
</ul>
</p>
</div>
</div>
</body>
<footer></footer>
</html>
Are you looking for something like this?
Give the parent element of container display: flex and justify-content: center; and let flexbox do its magic. This will center the child elements on the X-Axis
* {
margin: 0;
padding: 0;
}
html {
display: block;
flex-direction: column;
width: 100%;
}
body{
width: 100%;
display: flex;
justify-content: center;
color: black;
}
h1 {
text-align: center;
}
.sub {
position: absolute;
}
.container {
width: 50%;
border: 2px black solid;
box-sizing: border-box;
text-align: center;
}
<html>
<body>
<div class="container">
HELLO IM THE CONTAINER
</div>
</body>
</html>
I am trying to create a round profile pic on a background image. I want the profile pic to be responsive and change size or maintain at an ideal position when switching from different screens.
Currently, I am using margin with fixed values to offset the position, but I don't think it is the right way. Please look at the following output. Even at code snippet all the alignment is off. I am not sure how do I actually code the width and height so that it will maintain at an ideal position on all screens. How to really set the margins or padding? I have tried col-sm and col-md with different parameters but it only takes col-md.
My ideal output is as follow:
iPhone X (The positioning of the profile pic and wordings are ok with the current code)
iPad (The positioning is OFF)
iPhone5/SE The position is OFF again
I have included JSFiddle, please help.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>
This might help you.. In order to make it more responsive use media queries..
To round an image use border-radius:50%; and also specify the width and height of the image.
.user{border-radius:75%; width:100px; height:100px;}
.name, .pic{float:left;}
.prof{width:300px; position:absolute; bottom:-35px; left:4%;}
.name{padding:25px 10px;}
#sfitness{position:relative;}
.name span{display:block; text-transform:none; font-size:16px;}
.name p{text-transform:uppercase; font-size:18px;}
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-8 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div></div>
</body>
Here is the updated code as you said it will be responsive I think you are also using bootstrap I updated the class and rewrite some CSS
you can check .user,.information, .information p class information is a new calss
* {
box-sizing: border-box;
font-family: Arial;
font-size: 12px;
}
img {
width: 100%;
}
.profile-name {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 5%
}
.user {
display: inline-block;
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
object-fit: cover;
float: right;
}
p {
display: flex;
flex-direction: column;
}
.information {
line-height: 16px;
margin-top: 20px;
}
.information p {
font-size: 152%;
font-weight: bold;
line-height: 19px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row" style="margin-top:-60px">
<div class="col-xs-4 col-sm-6 col-lg-1">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-xs-6 col-sm-8 col-lg-10 information">
<div class="row">
<p>Jane Worng<span>How are you</span></p>
</div>
</div>
</div>
</body>
Take use of Media Queries for the repsonsive aspect. Its way easier than doing it in javaScript:
body{
background-color: white;
}
#media only screen and (max-width: 750px) {
body {
background-color: black;
}
}
In this example the background-color of the body is white as long as the screen width is 750px or more.
EDIT: I was able to fix this problem by switching to a float based layout. Not sure if there is a solution to the problem using an inline-block based grid. (I suppose I could use the position:relative or absolute, but that seems to be a bad idea.) Here's my Codepen: https://codepen.io/mattgwater/pen/yXBqoe (It works if full-screen) Ehsan's answer demonstrates how to basically do this layout too and probably is a better example of good code.
I am trying to build a website based on the template in the picture here. https://assets.themuse.com/uploaded/attachments/14846.png?v=None
However, if I have an image in the left column it causes all the text in the right column to go below the image. How can I fix this problem?
Here is my Codepen: https://codepen.io/mattgwater/pen/yXBqoe?editors=1100#0
My HTML
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="/Fonts/myFontsWebfontsKit/MyFontsWebfontsKit.css">
<link rel="stylesheet" href="/main.css">
</head>
<body>
<nav>
<div class="col left">
<div>
<h1 class="title">MATT GOLDWATER</h1>
</div>
</div><!--
--><div class="col right">
</div>
</nav>
<div class="nav-content-separator"></div>
<section>
<div class="col left">
<img class="profilepic" src="https://res.cloudinary.com/dyr8j9g6m/image/upload/v1496375439/my-headshot_bxpjqk.png" alt="Matt Goldwater">
<!--<p>yo</p>-->
</div><!--
--><div class="col right">
<p class="about">I want this sentence to be aligned with the top of the image.</p>
</div>
</section>
</body>
</html>
My CSS (I also have normalize CSS)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.title {
color: #6fc3c3;
/*font-family: FuturaDCD-Lig;*/
font-weight: bold;
font-size: 32px;
text-align: center;
letter-spacing: .05em;
}
.col {
width: 50%;
display: inline-block;
/*white-space: nowrap;*/
}
.left {
padding-left: 10%;
}
.profilepic {
padding-top: 7%;
height: 450px;
margin: 0 auto;
display: block;
}
.nav-content-separator {
border: 1px solid #e8e8e8;
}
.about {
font-family: Avenir;
}
I changed your code,use wrapper and float and other Properties.
#wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.title {
color: #6fc3c3;
float: left;
}
.right {
float: right;
}
.left {
float: left;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 1%;
}
li a {
color: #ccc;
text-decoration: none;
}
.col {
width: 50%;
box-sizing: border-box;
}
nav {
border-bottom: #ccc solid 1px;
overflow: auto;
}
.profilepic {
max-width: 410px;
width: 100%;
}
<div id="wrapper">
<nav>
<div class="col title"><h2>KRISTA GRAY</h2></div>
<div class="col right">
<ul>
<li>About</li>
<li>Services</li>
<li>Journal</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col left">
<img class="profilepic" src="https://cdn.shopify.com/s/files/1/1424/5850/products/Circular_Stickers_CG_1024x1024.jpg?v=1486690726" alt="Me">
</div>
<div class="right col">
<h4>Lorem Ipsum: common examples</h4>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
</p>
</div>
</div>
</div>
Few modifications in your code:
Give image max-width:100% so that image stay within the parent. Remove display:block from image style.
Add white-space:nowrap in the section style so that the whitespace is ignored. We need to ignore whitespace because .left and .right are set to width:50% and hence even a pixel of whitespace will break the layout.
Demo: http://jsfiddle.net/GCu2D/1952/
.profilepic {
padding-top: 7%;
max-width: 100%;
margin: 0 auto;
display: inline;
}
section {
white-space: nowrap;
}
See your col class have width of 50% and then you are also adding padding-left of 10%. So it is going more than 100%. Play with the col width, make it 40% and it should work.
I am trying to design a simple ecommerce website, in that my footer tag text is displayed right beside the section tag. I have no idea where I am doing wrong.
HTML
<aside id="categories">
<header id="headings" class="background_div">Categories</header>
<nav>
<ul>
<li>Staples</li>
<li>Oils</li>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</nav>
</aside>
<div id="bestsellers">
<header id="headings" class="background_div">Bestsellers</header>
<article class="productarticle">
<figure>
<img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>
</figure>
<div class="align_text">
<header id="headings">
<span class="productarticlename">Cabbage 1</span>
</header>
<p class="productprice">$10</p>
<div class="addtocart">
Add to Cart
</div>
</div>
</article>
<!-- 4 More Article Tags will be included here -->
</div>
</section>
<footer>
<div clas="heading">This is footer text</div>
</footer>
CSS
#content{
width: 100% px;
display: block;
}
.carousel_img{
width: 1000px;
}
#headings{
font-weight: bold;
}
#categories{
float: left;
}
#bestsellers{
float: left;
margin-left: 25px;
margin-right: 0 px;
width: 80%;
height: 100%;
margin-bottom: 20 px;
}
.background_div{
background: lightgreen;
}
.productarticle{
float: left;
}
.align_text{
text-align: center;
}
Please help me. I want the content in section tag and the text in footer tag to be displayed in seperate lines.
JS-FIDDLE DEMO
See this fiddle
Since your #content contains of floated elements, you also need to float the #content div. Thus add a float:left; to #content.
Now to clear this float effect from the footer, you need to add clear:both; to your footer CSS. Thus the changed CSS would be like
#content{
width: 100% px;
display: block;
float:left;
}
footer{
clear:both;
}
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D