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>
Related
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
I'm trying to make an online shop. I need 3 items in a row. I tried to do it by function but I see the cards under each other. How can I make a row of cards by 3 elements?
When I use flex the card doesn't look with the same design as now.
I think that the problem is with .product-item
Help me, please.
MY CSS:
* {
box-sizing: border-box;
border: 1px #e2e2e2;
}
.product-item {
width: 300px;
height:205px;
text-align: center;
border: 1px #e2e2e2;
background: white;
font-family: "Roboto";
}
.product-item img {
display: inline-block;
width: 100%;
border: 1px #e2e2e2;
}
.product-list {
background: #fafafa;
padding: 15px 0;
}
.product-list h3 {
font-size: 20px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #333333;
}
.product-list h4 {
font-size: 15px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #666666;
}
.sell {
font-size: 20px;
font-family: "Roboto";
color: #333333;
margin: 65px;
}
.price {
font-size: 35px;
text-align: left;
font-family: "Roboto";
color: #333333;
margin: -65px;
}
.cart img
{margin-top:-60px;
margin-left:200px;
width: 15%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
</body>
</html>
Try adding this to product-item class:
Width:33%;
Display:inline-block;
There are a lot of typography errors in your code (look at the class you are defining, look at the extra spaces, unclosed code sections in your CSS etc.)
To align three items, you can simply use flexbox display. Like in the example below.
section {
display:flex;
}
.itemmm img {
width:100px;
height:100px;
margin:25px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title>
<!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<section class="items-container">
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
</section>
</body>
</html>
So I've been trying to make myself a personal portfolio, however I've run into issues regarding that. Whenever I try to resize my image using the width thing in CSS3, my image does not respond. I've tried resizing it to 25%, 50%, 75%, and nothing works!
Here's my code:
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%;
}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://cdn.pixabay.com/photo/2020/09/16/20/30/lighthouse-5577451_1280.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</div>
</body>
</html>
My image called mika.png is in a class called profile-image-wrapper, and also does not respond to the text-align: center; thing.
I have tried in-line style coding, which works to an extent (however I prefer to not have to use in-line style so I can create a media query later), and I have used the !important attribute for CSS which only works for text-align and not the width.
To make your image responsive you should give it a max-width: 100% right now it follows the width of the container and it stays inside of it. So add this new piece of code.
.profile-image-wrapper img {
max-width: 100%;
}
now the image fills 50% of the width as you wanted to do. Now if you want your image to be in the middle with 50% width just add margin: 0 auto; to the image wrapper and you should be good to go.
.profile-image-wrapper {
text-align: center;
width: 50%;
margin: 0 auto;
}
if you want the image to be fill width you can remove the width 50% from the wrapper.
with 50% width applied to the wrapper
without the 50% width on the wrapper, it would look something like this.
Note that in both cases the image is responsive duo to the fact you added max-width:100% to the img tag.
That's not what you are looking for? please let me know and show me a screenshot of the desired output.
Try it:
.profile-image-wrapper img{
width:15%
}
Please set margin: 0 auto; for .profile-image-wrapper selector to make center horizontally.
Please set display: inline-block; CSS in .profile-image-wrapper img selector
Updated snippet :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<style>
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%; margin:0 auto;
}
.profile-image-wrapper img{ width:50%; display: inline-block;}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
</style>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://i.imgur.com/HPrl3u8.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</body>
</html>
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">
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;
}
}