I created this website http://fusioninfinite.com/DianeFH/ with the hope that it would display correctly on mobile devices. While it looks fine on my PC I have tested it on my IPod and the header, navbar, and footer background colors do not extend to the rest of the page when you scroll. I think it's a problem with the width being 100% but I am not sure
This is my HTML code I am using bootstrap:
<!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">
<meta name="description" content="Diane Swanson's website, online gallery and blog">
<meta name="author" content="Diane Swanson">
<meta name="keywords" content="diane, swanson, Diane Swanson, artist, freehawk art, art, freehawk, watercolor, visual artist, American Women Artists, artist, painting, landscapes">
<link rel="icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<title>Diane Swanson - Home</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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>
<div style="width:100%; background-color:#303030; class="blog-masthead">
<div align="center" style="width:100%; height:120px; background-color:#0b0b3b;">
<div style="width:740px; padding-top:40px;" align="left">
<h1 style="font-size:45px; font-family: 'Muli', sans-serif; color:lightgrey;">Diane Swanson</h1>
</div>
</div>
<div style="width:790px;" align="left" class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.html">Home</a>
<a class="blog-nav-item" href="about.php">About</a>
<a class="blog-nav-item" href="exhibits.html">Current & Upcoming Exhibits</a>
<a class="blog-nav-item" href="portraits.html">House Portraits</a>
<a class="blog-nav-item" href="gallery.html">Gallery</a>
<a class="blog-nav-item" href="wordpress/index.php">Blog</a>
</nav>
</div>
</div>
<div class="container">
<div style="margin-top:20px;" align="center">
<img src="images/homeheader.jpg">
<br><br><br>
<h2 style="float:left; color:#000066;"><strong>DIANE SWANSON</strong></h2>
<h2 style="float:right; color:#000066; font-style: italic;">visual artist</h2>
<br><br><br>
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
<br><br><br>
</div>
</div><!-- /.container -->
<div style="left:0; right:0;" class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>
This is my CSS:
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
width: 790px;
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
To make your website responsive, you are using Bootstrap, which is great, but you are using it incorrectly. By overwriting bootstrap's default CSS, it will only break it, as I said earlier. What you want to do is include your own DIVs or custom classes and apply the CSS to these.
Speaking of CSS, I would recommend to avoid inline CSS, in the style attribute, and to regroup all your CSS in a single stylesheet. It will be easier for you to edit your website afterwards. In my example, I added a lot of custom classes.
Also, don't use BR tag, except to break a line for text inside a P tag. In order to define spaces around an element, use MARGIN or PADDING
Next, I noticed that you compressed your website's content, or content container in this case to 790px. Nowadays, most screen resolution tends to be between 1920px and 1280px, excluding mobile and tablet resolution of course. By compressing, you are: 1) breaking bootstrap, 2) containing your content to the middle of the page and therefore leaving huge empty gaps to each sides for users with higher resolution screens.
Using bootstrap is great, but using it efficiently is better. Don't be afraid to use bootstrap to it's full potential. When looking at my take on the Html, notice how I abused DIV containers and added all of boostrap's own row and columns DIVs. When resizing the browser window, you will notice that all elements will follow and place itself on top of each other when there is no more room for elements to be side by side.
In the stylesheet, I added a bit of Media Queries. What this do is simple, it checks if the browser's width reached the threshold I specified. If it does, the I can target specific elements and apply additional CSS style. If the browser's width returns to normal, the additional CSS is removed.
For some reason unknown, I cannot create a Bootply example for you at the moment. But you can try to test it by adding my code and click Play to see how it looks and react to resizing. Bootply Website
If you have any questions, don't hesitate
Here is the complete html:
<div class="header">
<div class="container name-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Diane Swanson</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<nav class="blog-nav">
<ul>
<li><a class="blog-nav-item active" href="#">Home</a></li>
<li><a class="blog-nav-item" href="#">About</a></li>
<li><a class="blog-nav-item" href="#">Current & Upcoming Exhibits</a></li>
<li><a class="blog-nav-item" href="#">House Portraits</a></li>
<li><a class="blog-nav-item" href="#">Gallery</a></li>
<li><a class="blog-nav-item" href="#">Blog</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="blog-img" src="http://fusioninfinite.com/DianeFH/images/homeheader.jpg" alt="">
</div>
</div>
</div>
<div class="container middle-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 leftbox">
<h2>Diane Swanson</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 rightbox">
<h2>Visual artist</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 description-container">
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
</div>
</div>
</div>
</div>
<div class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
Here is the CSS:
.header{
width: 100%;
background-color: #303030;
}
.header h1{
font-size: 45px;
font-family: 'Muli', sans-serif;
color: lightgrey;
margin-left: 8px;
}
.name-container{
padding-top: 25px;
}
.blog-nav ul{
margin: 0;
padding: 0;
}
.blog-nav li{
float: left;
}
.blog-nav-item{
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
.blog-nav-item:hover{
text-decoration: none;
color: #FFF;
}
.active{
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
.blog-img{
max-width: 100%;
width: 1170px;
}
.content-container{
padding-top: 25px;
padding-bottom: 65px;
}
.middle-container{
padding-top: 10px;
}
.description-container{
text-align: center;
padding-top: 10px;
}
.leftbox h2{
color: #000066;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.rightbox h2{
float: right;
color: #000066;
font-style: italic;
}
.blog-footer{
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
/*MEDIA QUERIES*/
#media only screen and (max-width:770px) {
.rightbox h2{
float: none;
}
}
#media only screen and (max-width:585px) {
.blog-nav li {
float: none;
}
.blog-nav .active:after{
display: none;
}
}
Related
I'm new to web development and I'm trying to build a site using bootstrap 3. I want to use the grid layout for a section with three points but whenever I add it, the images overlap and are not centered when the browser is below the SM breakpoint.
Here is the HTML.
<!DOCTYPE html>
<html>
<head lang="en">
<!--Meta Data-->
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Luke Bouch">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Always Ready Power</title>
<!--Styles-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!--BootStrap CDN-->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<nav class="topNav">
<div class="container">
<img class="navLogo centerMobile" src="assets/20200811-ARLogo-White.png" alt="two kids looking out the window">
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="hero col-xs-12">
<h1>Keep your family safe<br/><span class="newLine">with a whole house generator</span></h1>
</div>
</div>
<div class="horizonralLayout row">
<div class="col-sm-4">
<img src="assets/point1.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
<div class="col-sm-4">
<img src="assets/point2.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
<div class="col-sm-4">
<img src="assets/point3.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
</div>
</div>
<!--Scripts-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
And here is the CSS.
/* --- IMPORT --- */
#import url("https://use.typekit.net/ptx4dws.css");
/* --- MOBILE ---*/
/* Global */
h1 {
font-family: proxima-nova, sans-serif;
font-weight: 800;
font-style: normal;
text-transform: uppercase;
font-size: 4rem;
font-weight: 800;
}
h2 {
font-family: proxima-nova, sans-serif;
font-weight: 800;
font-style: normal;
text-transform: uppercase;
font-size: 3rem;
font-weight: 800;
}
.newLine {
display: block;
font-size: 2.2rem;
font-weight: 500;
}
p {
font-family: proxima-nova, sans-serif;
font-weight: 500;
font-style: normal;
}
a {
text-decoration: none;
color: black;
}
.break {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.centerMobile {
display: block;
margin-left: auto;
margin-right: auto;
}
/* NavBar */
.topNav {
background-color: rgb(232, 19, 35);
}
.navLogo {
height: 80px;
margin: 10px auto 10px auto;
align-content: center;
}
.menuList {
list-style: none;
}
.topNav li {
padding: 5px 5px 5px 5px;
}
.topNav a {
color: white;
font-size: 1.7em;
}
.topNav a:hover {
text-decoration: none;
font-weight: 600;
}
/* Hero */
.hero {
padding: 25vw 5vw 25vw 5vw;
background-image: url(/assets/heroBG.png);
background-position: center;
background-size: cover;
}
.hero h1 {
text-transform: uppercase;
font-size: 4rem;
font-weight: 800;
}
.hero .newLine {
display: block;
font-size: 2.2rem;
font-weight: 500;
}
/* Horizontal Layout*/
.horizontalLayout .item {
padding: 10px 10px 10px 10px;
}
I really appreciate any help!
Two issues - first - you are not applying any styling for the xs- class -so it will be taking up the entire width (if you do not apply a column designation - the element will be at 100% of the width - as if you had col-xs-12.
If you still want the 3 images across - then you will need to apply a col-xs-4 to the divs with col-sm-4. Alternatively - you might want them to be different porpotional widths on the xs size - so you might want col-xs-6 col-sm-4" and have the images on two lines.
And second - you have a discrepancy in the code between the html class and the associatd styling - horizontalLayout needs to be updated in the html
//html
<div class="horizonralLayout row">
/css
/* Horizontal Layout*/
.horizontalLayout .item {
padding: 10px 10px 10px 10px;
}
And a suggestion - investigate the element for your images - its the right tool for displaying the content you are showing here.
<div class="col-xs-4">
<figure>
<img src="assets/point3.png">
<figcaption>
It's only a matter of time<span class="newLine">before your stuck without power</span>
</figcaption>
</figure>
</div>
So pretty much, I have a container with two divs inside. I have each div set to float to different sides. One to the left and one to the right, now the issue I'm having is that since I have to set the height manually, it shifts the page like 10 pixels over from the original spot. So when I load a different page, it isn't lined up vertically. Here's the .gif of it and here's my code. This website is for my webdesign class. Thanks
https://imgur.com/a/h9dW7ib
index.html (page that's shifted over)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="container">
<div class="banner">
<img src="images/banner.png">
</div>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Cases
Motherboards
Processors
Graphics Cards
Storage
Power Supplies
RAM
Other
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
<div class="contact" id="navright">
Contact
</div>
</div>
<div class="featured">
<div id="product_left">
<img src="images/featured.gif" id="featured_gif">
</div>
<div id="product_right">
awdaw
</div>
</div>
<div class="welcome">
<h1 class="welcome_header">Welcome</h1>
<p class="welcome_text">Here at Terry's Computers we are determined to make our customers experience as
stress free as possible. We will help every customer find the best deal possible
for their budget. Here we have computer parts such as motherboards, processors, and
more to offer. We also offer prebuilt computers that range from productivity, gaming,
or whatever the customer desires. We also take custom requests that can more suit our customers.
We can help you find the perfect computer that will satisfy your needs. If you have any
questions or suggestions head over to the Contact page and send us an email.</p>
</div>
<div class="footer">
<p class="footer_text">Yeet</p>
</div>
</div>
</body>
</html>
stylesheet.css
/*
Color Scheme
http://paletton.com/#uid=14x0u0k++k3ZJvC+Wpu+Zer+W78
*/
body{
background-color: #25004E;
margin: 0;
}
.container{
width: 960px;
margin: 15px auto;
}
.banner{
margin-top: 15px;
}
/* Navigation Menu */
.navbar {
margin-top: 15px;
border: 3px solid black;
border-radius: 10px;
overflow: hidden;
background-color: #333;
font-family: "Arial Black", Gadget, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #23004E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: "Arial Black", Gadget, sans-serif;
text-align: left;
}
.dropdown-content a:hover {
background-color: #23004E;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active{
background-color: #400089;
}
.featured{
margin-top: 15px;
background-color: #420089;
border: 3px solid black;
border-radius: 10px;
padding: 30px;
overflow: auto;
}
#product_left{
float: left;
width: 432px;
background-color: white;
border: 3px solid black;
border-radius: 10px;
padding: 13px;
}
#product_right{
float: right;
width: 432px;
background-color: #5201AA;
border: 3px solid black;
border-radius: 10px;
}
.welcome{
margin-top: 15px;
background-color: #420089;
border: 3px solid black;
border-radius: 10px;
height: 500px;
padding: 30px;
}
.welcome_header{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 25pt;
text-align: center;
}
.welcome_text{
font-family: "Arial Black", Gadget, sans-serif;
width: 800px;
text-align: justify;
margin: 30px auto;
text-indent: 50px;
font-size: 13pt;
}
.footer{
margin-top: 15px;
border: 3px solid black;
border-radius: 10px;
background-color: #333;
}
.footer_text{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10pt;
text-align: center;
color: white;
}
and finally, my news.html (page that's in the original position)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="container">
<div class="banner">
<img src="images/banner.png">
</div>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Cases
Motherboards
Processors
Graphics Cards
Storage
Power Supplies
RAM
Other
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
<div class="contact" id="navright">
Contact
</div>
</div>
<div class="footer">
<p class="footer_text">Yeet</p>
</div>
</div>
</body>
</html>
It is a normal behavior and a famous question. It is because the content of one of your page is bigger than the screen and the other content page is not bigger than the screen. It cause the scrollbar on the right side to appears and disappear depending of the page.
You can fix it like that :
/* One of these two solutions at the beginning of your css file */
html { overflow-y: scroll; } /* Will display the bar all the time */
/* OR */
html { margin-left: calc(100vw - 100%); }
See : https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/
It is caused because of the scrollbar appearing on the index page and
not appear on the news page.
When you give a static height you intentionally cause a scrollbar to appear and width of the page appear to be same then. Everything is normal in this case.
If you really obsessed to make them identical, either insert enough
content to news page to make a scroll appear or calculate the widths
more precisely(use % instead of px, em, rem).
I am using pdfkit in order to generate pdfs from html strings, rendered by my Django's views.
For some reason, the output pdf is small.
My pdfkit option dictionary is -
options = {
'quiet': '',
'page-size': 'A4',
'margin-top': '0.75in',
'margin-right': '0.75in',
'margin-bottom': '0.75in',
'margin-left': '0.75in',
'disable-smart-shrinking': ''
}
and the output file is here
Html code is -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="pdfkit-orientation" content="Portrait"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dribble</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet">
<!-- Custom Font -->
<style>
body {
font-family: 'Open Sans', sans-serif;
}
p, a {
color: #002f54;
}
.nav {
background: #002f54;
color: #FFFFFF;
border-radius: 5px;
}
.ico {
padding-right: 5px;
top: 3px;
}
.nav > li p {
text-align: center;
font-size: 36px;
font-weight: 800;
}
.right-align {
float: right;
}
.pad-mar {
font-size: 18px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-middle {
font-size: 18px;
padding-top: 78px;
padding-bottom: 25px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-bottom {
font-size: 18px;
padding-top: 10px;
padding-bottom: 90px;
margin-left: 30px !important;
margin-right: 30px;
}
.pad-mar-footer {
padding-top: 20px;
margin-left: 30px !important;
margin-right: 30px;
}
.bor-bottom {
border-bottom: 2px solid #ccc;
}
.no-pad {
padding-left: 0;
}
.section {
margin-top: 20px;
margin-bottom: 20px;
}
.bold {
font-weight: 700;
color: #002f54;
}
.small {
font-size: 14px;
}
.bolder {
color: #002f54;
font-weight: 800;
font-size: 22px;
}
.normal {
color: #002f54;
font-weight: 700;
}
.smaller {
font-size: 14px;
font-weight: 700;
}
h3 .bold {
margin-top: 0;
}
.neg-mar {
margin-top: -25px;
}
.cus-img {
max-width: 85px;
margin-bottom: 10px;
}
.nav-stacked.mob > li {
font-size: 16px;
margin-left: 0px !important;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 5px;
border: 1px solid #EB6C6D;
border-radius: 5px;
font-weight: 300;
text-align: center;
color: #EB6C6D;
}
.nav-stacked.mob > li p {
color: #002f54;
}
.nav.mob {
background: #FFFFFF;
}
.pad-mar-bottom.mob {
margin-left: 0px !important;
padding-bottom: 10px;
}
.pad-mar-footer.mob {
margin-left: 0px !important;
text-align: center;
padding-top: 10px;
}
.l-mar {
margin-left: 40px;
}
.titl {
color: #EB6C6D;
font-size: 16px;
}
.bot-mar {
margin-bottom: 20px;
}
.container {
max-width: 575px;
}
</style>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="section">
<div class="container">
<div class="row bor-bottom bot-mar">
<div class="col-xs-6 ">
<img src="https://api.figo.me/assets/images/accounts/north_channel_bank_144.png"
class="img-responsive cus-img"/>
<p> Commerzbank Service-BZ</p>
<p>First line</p>
</div>
<div class="col-xs-6">
<div class="right-align neg-mar">
<h3 class="bold">First line</h3>
<p class="bold">First line</p>
<p class="bold">First line</p>
</div>
</div>
</div>
<div class="row">
<div class="">
<ul class="nav nav-stacked mob">
<li><span class="glyphicon glyphicon glyphicon-user ico"></span>From<p>Rewe GmbH</p></li>
<li><span class="glyphicon glyphicon glyphicon-credit-card ico"></span>Amount<p>$ 32,10 USD</p></li>
<li><span class="glyphicon glyphicon glyphicon-calendar ico"></span>Payment Date<p>Nov 5, 2017</p>
</li>
</ul>
</div>
</div>
<div class="row pad-mar-bottom mob bor-bottom">
<p class="titl"><span class="glyphicon glyphicon-tag ico"></span>Payment Reference</p>
<div class="l-mar">
<p class="normal">Hello Ennio,</p>
<p class="normal">You sent a payment of <span class="bolder">$20.00 USD</span> to Dribble. (paypal#dribble.com)</p>
<div class="no-pad">
<p class="smaller">It may take a few moments for this transaction to appear in your account.</p>
</div>
</div>
</div>
<footer>
<div class="row pad-mar-footer mob">
<a class="smaller" href="#">This document was automatically generated by Koryo</a>
</div>
</footer>
</div><!-- Container -->
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The problem was about setting the dpi parameter for pdfkit.
So if you encounter the same problem, just set the dpi according to your need. For me, this what I was needed
options = {
'page-size': 'A4',
'dpi': 400
}
I had this same issue. I just changed the default configuration:
PDFKit.configure do |config|
config.default_options = {
page_size: 'A4',
print_media_type: true,
dpi: 400
}
end
you can try to disable shrinking through the options as below
options = { 'disable-smart-shrinking': ''}
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
Here I'm creating a button but for some odd reason the text is a little off and isn't centered even though I have used display: block; and text-align: center; inside my css file.
Line 30 is where my button starts here is my html and custom css code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<title>Proto X Media - Home</title>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
<div class="buttonpad">
<div class="button">
<span>Explore</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And here is my css on line 39 is where the code for my button is
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
display: block;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 120px;
height: 110px;
}
.pushdown {
padding-top: 100px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 18px;
display: block;
}
.button {
width: 82.61px;
height: 37.65px;
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
.buttonpad {
padding-top: 10px;
}
Thank you very much ! Also if you haven't noticed I'm using Bootstrap for my grid.
For centering horizontal, change your markup to this and you should be fine
<div class="button"><span>Explore</span></div>
When breaking line using an inline element, that line break cause a white space at the end pushing the text slightly to the left
For centering vertical, use line height, like this
.button {
width: 82.61px;
height: 37.65px;
line-height: 37.65px; /* added property */
box-sizing: border-box;
background-color: white;
font-weight: 700px;
box-shadow: 0px .2em 0px 0px #ebebeb;
display: block;
text-align: center;
background-position: center;
border: none;
margin: auto;
font-family: 'Bree Serif', serif;
}
Try to use padding like this;
padding: 6px 12px;
OR
.button{
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
One simple fix is to use line-height as the height of the containing div, as in this jsfiddle :
.button span
{
display: block;
line-height: 37px;
}
https://jsfiddle.net/az2vs6y3/1/
Or you could also use negative margin and absolute positionning, but it would be slightly less flexible.
Why are you using div as button, use html button for hyperlink and css looks fine
<input type="submit" value="Explore">