I made this landing page which worked fine. The background image covered the page and it looked great. I left it and came back a day later and it looks different. I can't see the reason for it. The image wont appear behind the text at all only in the header (check the picture).
<body>
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
</div>
</div>
<!-- featured content -->
<div class="featured">
<!-- row for grid system / limit space taken by featured content -->
<div class="row">
<!-- use only 9 columns out of 12 for medium and large devices -->
<div class="col-md-9">
<h1> Christopher McConney</h1> <br> <br>
<h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
<p>
<a class="btn btn-default btn-lg" href="index.html"> Find out more </a>
</p>
</div>
</div>
</div>
<!-- footer-->
<div class="footer">
<div class="container">
<p align="right"> © Developed by Christopher McConney 2018 </p>
</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>
</body>
The CSS is as follows:
.jumbotron {
background: url(images/background.jpeg) center center ;
background-size:100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
/*logo position and size*/
.logo{
width:85px;
height:65px;
}
.jumbotron logo{
margin-right: 30px;
margin-top: 10px;
}
/*set text colour*/
.featured{
color:lightgrey;
margin-left: 10px;
}
/* space between logo and title */
.featured h1{
padding-top: 60px
}
/*style button*/
.featured .btn-default{
font-weight:bold;
color: lightgrey;
background-color: darkgrey;
border-radius: 10px;
margin-top: 20px;
align-content:center
}
/*style footer*/
.footer{
background-color:rgba(0, 0, 0, 0.5);
color:darkgray;
font-size: 15px;
padding:10px; 0px;
position: absolute;
right: 0;
bottom:0;
left:0;
}
It looks like you closed your jumbotron DIV early. This is what you have:
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
</div>
</div>
Move both </div> above after the .featured DIVs closing tag.
Well it seems that your .featured div needs to be nested inside your .jumbotron which has the background image. Currently you have it nested outside of the .jumbotron.
The new markup would look like this:
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
<div class="featured">
<!-- row for grid system / limit space taken by featured content -->
<div class="row">
<!-- use only 9 columns out of 12 for medium and large devices -->
<div class="col-md-9">
<h1> Christopher McConney</h1> <br> <br>
<h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
<p>
<a class="btn btn-default btn-lg" href="index.html"> Find out more </a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- featured content -->
<!-- footer-->
<div class="footer">
<div class="container">
<p align="right"> © Developed by Christopher McConney 2018 </p>
</div>
</div>
This will also correctly place your Bootstrap .row inside the .container like it's suppose to be.
Related
I am trying to make this image full size but why some space is remaining right side
CSS/HTML
/* Header */
.header {
background: url('https://picsum.photos/1920/1080') center center no-repeat;
background-size: cover;
}
.header .header-content {
padding-top: 15.5rem;
text-align: left;
}
.header .text-container {
margin-top: 3rem;
margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
<!-- start of header -->
<header id="header" class="header">
<div class="header-content"> //here give an class of that image
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
<p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
<a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
</div>
<!-- end of text-container -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<div class="image-container">
<img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
</div>
<!-- end of image-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of header-content -->
</header>
<!-- end of header -->
</div>
I want to set this full image right side(question mark)
which place need correction
add the width and height to body and html in head.
html,body {
width:100%;
height:100%
}
.img-fluid{
width:100%
height:100%
}
.image-container{
width:<!--as you wish--> 20px;
height:<!--as you wish--> 20px;
}
I created the following with bootstrap:
The code for the above is this:
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
.cta-header {
z-index: 3;
position: relative;
background-size: cover;
height: 100vh;
padding: 160px 0;
top: 0;
left: 0;
width: 100%;
float: left;
}
There is supposed to be a section under that screen. But it appears to be overlapping, as seen here:
The code for the "section" that isn't supposed to be overlapping is the following:
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
position: absolute;
width: 1170px;
}
The container is not supposed to be under the other container like that. I want it to be under (like building blocks). My attempt was to change the positioning but that only kept it overlapping. I tried doing margin-top, but that is not really a solution to not make it overlap.
You are making it to be like that. Can you please explain why did you use properties such as absolute and float on some cases? Maybe we would find a better solution for that.
Working fiddle
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
width: 1170px;
}
.cta-header {
background-size: cover;
height: 100vh;
padding: 160px 0;
}
I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?
HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB
THE HTML
</head>
<body>
<!--
==============================
LOGO HEADER
==============================
-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-6"></div>
</div>
</div>
</section>
<!--==============================
SLIDING BANNEER
==============================-->
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
</div>
</section>
<!--==============================
MENU BAR
==============================-->
<section>
<div class="container">
<div class="col-md-12">
<nav>
<ul>
<li>Home</li>
<li>Codepen.io</li>
<li>A longer button</li>
<li>This is my really long button</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</section>
<!--==============================
MAIN CONTENT
==============================-->
<section>
<div class="container" id="MainPage">
<div class="row">
<div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this? </div>
<div class="col-md-2">I AM IN THE BANNER SECTION </div>
</div>
</div>
</section>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
THE CSS
body {
background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
list-style: none;
overflow: hidden;
height: 47px;
}
nav ul li a {
color: #F9F7F7;
background-image: linear-gradient(to top, #ff6351, #ffcc6e);
padding: 8px 22px 8px 22px;
display: block;
text-align: center;
font-size: 22px;
float: left;
margin-right: 5px;
color: rgb(255, 255, 255);
background-color: rgb(120, 120, 120);
text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
margin: 15px;
}
#MainPage
{
background-color: white;
}
.midText
{
text-align:center
}
.MainContent
{
margin: 33px;
}
this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
</div>
</section>
You should take advantage of the column system to help center your divs.
If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.
So...
<section>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-4"></div>
</div>
Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.
In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/
As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.
display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;
For the logo...
<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
.Logo {
display: block;
margin: 15px auto;}
Quick solution for you.
I'm currently using Customizr theme, with the default settings for the pages set to "full width / no sidebars".
However, when I try do do something like this within a page :
<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>
with the corresponding CSS code :
#blue-background{
width: 100%;
float: left;
padding: 20px;
background: #2680BE;
position: relative;
}
I still have white margins around my text. Increasing the width doesn't seem to be a good solution, so how can I do ?
here is an example of what I get with this code:
http://www.cirnu.com/bandeau/
Your main-wrapper should look like this
<div id="main-wrapper">
<div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin">Accueil</span> <span class="sep">»</span> <span class="trail-end">Bandeau</span></div></div></div></div>
<div role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container">
<article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
<header class="entry-header">
<h1 class="entry-title format-icon">Bandeau</h1>
<hr class="featurette-divider __before_content">
</header>
<div class="entry-content">
<div role="main">
<div id="blue-background">
<div class="container">
<h1 style="text-align: center;">Full width text with background color ?</h1>
</div>
</div>
</div>
</div>
</article>
</div><!--.article-container -->
</div><!--.row -->
</div><!-- .container role: main -->
</div>
Then you'll need to change some CSS rules:
#blue-background {
padding:20px 0;
/* then all the other rules you already have */
}
.article-container {
width:100%;
}
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...)