When I'm trying to set a scaleable window using Bootstrap, the padding of my elements changes the scaling, the the website does not properly scale to the mobile size. I cannot find out how to fix this.
my HTML is
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="no.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<header>
<div class="navbar navbar-static-top">
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>The Team</li>
<li>Event Schedule</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="who">
<h2>Who Are We?</h2>
<p>YES is an organization founded by youth for youth to help make a positive change within society. By supporting a large variety of organizations both big and small within the community, youth not only get the opportunity to explore their interests, but are able to gain a voice in society. If you are interested, our weekly meetings will begin in 2015.</p>
</div>
</div>
<div class="row">
<div class="why">
<h2>Why YES?</h2>
<p>We strive to provide youth (anywhere within Peel) with new experiences, help youth explore their interests, provide opportunities for them to socialize with other youth and provide them with activities to do which will help them in gaining volunteer hours. We will most likely have weekly meetings where we will discuss issues regarding a specific topic, which will be different every month! We will work together to create awareness about these topics by doing activities related to the topic and fundraising for an organization that supports or represents the topic. YES is a great way to gain your 40 hours and get exposure to many amazing organizations and activities!</p>
</div>
</div>
<div class="row">
<div class="update">
<h2>Updates</h2>
<p>Youth Engagement in Peel is a new orgination, as a result of which, the first meeting is scheduled to occur sometime in February. Voting will be posted on the "Event Schedule" page, and the topic will be updated on a month-to-month basis. Please check back for more information.</p>
</div>
</div>
</div>
<footer>
<div class="navbar navbar-default navbar-custom navbar-fixed-bottom">
<div class="copy">
<img src=img/facebook.png>
<img src="img/twitter-wrap.png">
<p>©Youth Engagement in Society. All Rights Reserved</p>
</div>
</div>
</footer>
</section>
</body>
And my CSS is
body {
background-color: #e8e8e8;
}
header {
padding: 7px;
background-color: white;
}
header img {
text-align: center;
height: 60px;
width: 200px;
}
/* Navigation Bar */
.navbar-custom {
color: white;
background-color: white;
border-color: white;
margin-top:0px;
}
navbar-inverse .navbar-brand { color: red;}
.navbar a {
color: black;
font-size: 15px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
}
.navbar li {
display: inline;
}
/* Paragraphs and images*/
.who {
width: 600px;
margin-top:100px;
}
.why {
margin-top:100px;
margin-left: 500px;
}
.update {
margin-top:100px;
width: 600px;
}
/* Footer */
footer {
margin-top: 550px;
background-color: #4f4f4f;
clear: both;
}
footer p {
color: black;
padding-left: 200px;
}
.copy p {
display: inline;
}
You need to use .col-xs-* .col-sm-* .col-md-* .col-lg-* inside .row class if you want to use bootstrap responvie block classes
<div class="row">
<div class="col-sm-6">column1</div>
<div class="col-sm-6">column2</div>
</div>
watch some examples
http://getbootstrap.com/getting-started/#examples
http://getbootstrap.com/css/#grid-options
Related
I was following this tutorial on youtube and when it came time to view my work and align the text with the icons horizontally, they remained stacked. What is an alternate way to use bootstraps grid system to align them horizontally instead of stacked on top of each other? I'm at a lost at how to fix this mess, it seems the tutorial was more for intermediate level coders.
body {
font-size: 15px;
font-family: arial,helveitca,sans-serif;
padding: 0;
margin: 0;
background-color: #dcdde1;
}
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
/* ------------ header ---------- */
header {
background: #7f8fa6;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #192a56 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li {
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding {
float:left;
}
header #branding h1 {
margin: 0;
}
header nav {
float:right;
margin-top:10px;
}
header .highlight, header .current a {
color: #40739e;
font-weight: bold;
}
header a:hover{
color:#cccccc;
font-weight: bold;
}
/*-----------showcase------------*/
#showcase {
min-height: 400px;
background:url(../images/laptop.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color:white;
}
#showcase h1 {
margin-top:100px;
font-size:55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/*-----------newsletter--------------*/
#newsletter {
padding:15px;
color:white;
background: #7f8fa6
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:40px;
width: 250px;
}
.button_1{
height:40px;
background-color: #fbc531;
border:0;
padding-left: 20px;
padding-right: 20px;
color:#353637;
}
#boxes {
margin-top: 20px;
}
#boxes .box {
float:left;
text-align: center;
width:30%;
padding:10px;
}
footer {
padding:20px;
margin-top: 20px;
color:white;
background:7f8fa6;
text-align: center;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="description" content="Affordable Web Design For Small and Medium-sized Companies">
<meta name="author" content="Keith Segovia">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="normalize.css-master/normalize.css">
<link rel="stylesheet" href="css/mainfollow.css" type="text/css">
<title>Youtube Tutorial 1</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>
<i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design
</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Web Design For Small and Medium-sized Companies</h1>
<p>d stamp, an am rudely strut befor made to court an amber To this fair proportive to deep bounting upon of the souls of York; And now, insteadful merry merry mer bruised fore our bruised fright the capers nimbly instern al.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Get Our Newsletter</h1>
<form action="">
<input type="email" placeholder="Enter your email here">
<button type="submit" class="button_1">Subscribe
</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box"><i class="fa fa-signal fa-5x"></i>
<h3>Grow Your Audience</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="box "><i class="fa fa-photo fa-5x"></i>
<h3>Modern Web Design</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
<div class="container">
<div class="box"><i class="fa fa-cube fa-5x"></i>
<div class="row">
<div class="col-lg-4">
<h3>Ultra Fast Hosting</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>1-2-3 Web Design Copyright © 2019</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To create columns using bootstrap
step 1-create container.
step 2-create row inside the container.
step 3-create columns (while using grid system screen divided into 12 columns).
so if you want to create 3 equals columns then col-md-4 + col-md-4 + col-md-4= 12columns
if want to create 2 equal columns then col-md-6 + col-md-6 = 12 columns
if you want to create column of different size create part according to choice
(for eg want to create 2 different column do like this col-md-4 + col-md-8 =12 columns)
this is the approach we always follow while creating bootstrap columns
I hope you will understand what I want to say.
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
</div>
</div>
</section>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<link rel="stylesheet" href="Team.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/textition.js"></script>
<link rel="stylesheet" href="SparkHome.css">
<link rel="stylesheet"href="Event.css">
<script type="text/javascript">
</script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="mainWrapper">
<div class="main">
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<a class="navbar-brand ml-0">
<h1 style="
font-size:40px;
color: white;
" class="d-lg-none"> Logo</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pt-2 pb-2">
<li class="nav-item mt-0" id="navItems">
Home
</li>
<li class="nav-item mt-0" id="navItemsActive">
The Team
</li>
<li class="nav-item mt-0" id="navItems">
The Event
</li>
<li class="nav-item mt-0" id="navItems">
Volunteer
</li>
<li class="nav-item mt-0" id="navItems">
Register
</li>
</ul>
</div>
</nav>
<h1 class="heading">The Event</h1>
<hr class="headingHR">
<div class="block">
<h1 class="eventTitle">
Cubing
</h1>
<p class="eventContent">
The real reason behind the creation of this organisation. We founder members are passionate cubers, in need of a platform to learn and show our skills. This thirst created our organisation.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Surprise
</h1>
<p class="eventContent">Do you think that we'll tell you right now? Be there to witness the excitement.<br>EXPECT THE UNEXPECTED </p>
</div>
<div class="block">
<h1 class="eventTitle">
Logic Solving
</h1><p class="eventContent">
This event consists of 2 rounds. The first is a paper-based round that tests your logic and decision-making skills. The second is an actual, physical puzzle.
</div>
<br>
<div class="block">
<h1 class="eventTitle">
Horcrux Hunt
</h1>
<p class="eventContent"> In its first ever appearance at SPARK, participate in The Horcrux Hunt, scavenging for treasure items stowed away in the campus grounds.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Fortnite
</h1>
<p class="eventContent">
With a staggering 125 million active players, Fortnite is THE hottest game on the market right now.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
MCU event
</h1>
</div>
</div>
</body>
</html>
This is how my page looks like when I add some content in the divs.
.block {
margin-top: 50px;
height:300px;
margin-left: 30px;
width: 300px;
background-color: transparent;
border:2px solid white;
padding: 10px;
display: inline-block;
text-align: center;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
border-radius:20px;
margin-bottom: 50px;
}
.main {
text-align: center!important;
}
#media only screen and (max-width: 600px) {
.block {
height: 300px;
width: 300px;
margin-left:0;
margin-right: 0;
margin-top: 30px;
}
}
.eventTitle {
font-family: 'Montserrat',sans-serif;
margin-top: 20px;
color: white;
font-size: 25px;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.eventContent {
color: white;
margin-top:10px;
font-family: 'Montserrat',sans-serif;
font-size: 17px;
}
When there is no content in the .block class, the divs are arranged and spaced evenly. However, as I add content (.eventContent class), the divs (.block) go haywire. They are set as display:inline-block. How might I go about getting the divs with content to be evenly spaced and arranged?
The problem is not in the margins, it is the vertical alignment of the <div> elements.
You should add this to your styles:
.block { vertical-align: top }
Depending on exactly how you want the vertical placement to work, you might change that to vertical-align: text-top. See the CSS specs for details.
(NOTE the default is vertical-align: baseline, which aligns the bottom of the last line of text in each box to its neighbors).
The elements which have class .block have display: inline-block applied to them. The default vertical alignment for inline-blocks is baseline (i.e the last text lines in the blocks are aligned)
So just add vertical-align: top to the CSS for the .block class to force their contents to the top and align them as desired.
I don't have a specific code example, just looking for a general answer.
I know my navbar doesn't resize well in mobile, so is there a good/correct way to fix this? Someone mentioned using CSS #media queries, but I don't know anything about them.
If I do need media queries, what's a good resource to learn about them? Everything else looks fine when I use col-md-(), just not the navbar.
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
<!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">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<a href="#">
<h2>Balloons</h2>
</a>
<p> Our hand crafted balloon creations are a hit at every! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon things for events!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<a href="#">
<h2>Flowers</h2>
</a>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<a href="#">
<h2>Gifts</h2>
</a>
</div>
<div class="col-md-12 col-xs-12 text-center">
<a href="#">
<h2>Hours</h2>
</a>
</div>
</div>
</div>
<!-- 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="js/bootstrap.min.js"></script>
html css twitter-bootstrap
You can learn more about CSS #media queries here:
templatemonster.com/blog/css-media-queries...
It explains about media queries and how to make it work on other devices, and it includes an IE 7 and IE 8 fallback mechanism.
IF you want to learn Bootstrap, you can use bootstrap GUI designing tool:
codepley.com/go/bp/new
I do two things. (When the first one not working properly, I'll go to the second method.)
First Method.
I search for common mobile device sizes and used them to adjust the navbar according to it. Common sizes are 320px, 375px, 480px, 640px, 768px, 1024px.
#media (max-width: 600px) {
Your code here
}
Second Method
If my common sizes are not correctly working I tried to reduce the sizes one by one and try to get the absolutely correct matches that may not destroy the website.
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)