The bootstrap social media buttons were showing and now they aren't and I don't know why. Any ideas?
Also when I click the contact button on the menu, the point it jumps to is not lined up with the start of the contact section, it was previously working like the rest of the sections and I can't figure that out either.
link to the code pen
.navbar {
background-color: black;
}
.navbar ul li a {
color: #fff !important;
font-size: 15px;
}
.navbar ul li a:hover {
background-color: #fff !important;
color: black !important;
}
.navbar-brand {
color: #fff !important;
font-size: 20px;
}
/***** HOME *****/
#home {
background: url("http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg") no-repeat center center fixed;
background-size: cover;
height: 680px;
}
.home-wrap {
padding-top: 140px;
}
.home-header {
font-family: 'Lobster';
font-size: 80px;
color: #fff;
}
h2 {
font-family: 'Lobster';
font-size: 60px;
color: #fff;
}
.home-line {
border: 0;
height: 3px;
width: 90%;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 153, 0, 1), rgba(0, 0, 0, 0));
}
.btn {
margin: 10px;
width: 80px;
border-radius: 5px;
background-color: black;
color: #fff;
border: none;
font-size: 20px;
}
.btn:hover {
background-color: silver;
color: black;
}
/***** ABOUT *****/
#about{
background-color: white;
padding-bottom: 80px;
}
.about-wrap {
width: 80%;
margin: auto;
margin-top: 95px;
}
h3 {
width: 80%;
margin: 0 auto;
font-size: 3em;
text-transform: uppercase;
text-align: center;
border-bottom: ;
padding: 0.2em;
}
.about-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.align {
width: 80%;
margin: 2em auto;
text-align: center;
}
.imga {
width: 120px;
height: 120px;
padding: 20px;
}
/***** PORTFOLIO *****/
#portfolio {
padding-top: 30px;
padding-bottom: 40px;
background-color: #EEDFCC;
}
.portfolio-header {
font-size: 3em;
color: #000;
}
.portfolio-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.placeholder-item {
margin-top: 40px;
text-align: center;
overflo: hidden;
}
.placeholder-desc {
margin-top: 10px;
font-size: 16px;
color: #000;
}
.imgp {
border: 1px solid black;
border-radius: 5px;
width: 100%;
}
.divider {
background-color: black;
height: 3px;
}
/***** CONTACT *****/
#contact {
background-color: white;
padding-top: 10px;
padding-bottom: 65px;
}
.contact-wrap {
margin-top: 60px;
}
.contact-header {
font-family: "Oswald";
color: #000;
font-size: 40px;
}
.contact-line {
background-color: black;
border: none;
height: 2px;
width: 40%;
}
.contact-wrap {
margin-top: 60px;
}
form {
margin-top: 50px;
}
input {
width: 40%;
height: 30px;
margin: 10px;
}
#message {
width: 40%;
height: 200px;
margin-top: 10px;
}
#submit-button {
widh: 10%;
height: 40px;
}
/***** FOOTER *****/
footer {
background-color: black;
height: 40px;
}
.footer-menu {
margin-left: -30px;
}
.footer-menu li {
display: inline;
margin: 10px;
}
.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.footer-menu li {
display: inline;
margin: 10px;
}
.footer-menu li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald|PT+Serif' rel='stylesheet' type='text/css'>
</head>
<!-- Navigation bar with the help of bootstrap -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio 1st Attempt</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="home">
<div class="home-wrap text-center">
<h1 class="home-header">Personal Portfolio Webpage</h1>
<h2>Social Media links</h2>
<hr class="home-line">
<div>
<a class="btn btn-default" type="button" href="#"><i class="fa fa-twitter"></i></a>
<i class="fa fa-linkedin"></i>
<i class="fa fa-github"></i>
<i class="fa fa-fire"></i>
</div>
</div>
</div>
<div id="about">
<div class="container">
<div class="about-wrap text-center">
<h3>Skills</h3>
<hr class="about-line">
<div class="align">
<div class="row">
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/html_u7horu.png" alt="HTML5">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/css3_v0rzyx.png" alt="CSS3">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/rails_jusgqs.png" alt="Rails">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/javascript_a2cxa4.png" alt="Javascript" >
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/jQuery_uy0yu0.gif" alt="jQuery">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/ruby_t0scub.png" alt="Ruby">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679096/bootstrap_xfpqre.png" alt="Bootstrap">
</div>
<div class="col-xs-6 col-sm-3">
<img class="imga" src="http://res.cloudinary.com/dnkqgvjbd/image/upload/v1451679097/sql_mnbnrc.png" alt="SQL">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio">
<div class="container">
<h1 class="portfolio-header text-center">PORTFOLIO</h1>
<hr class="portfolio-line">
<div class="placeholder-box">
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
<div class="col-md-4">
<div class="placeholder-item">
<img class="imgp" src="https://placehold.it/350x150" alt="project">
<p class="placeholder-desc"> Placeholder</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div id="contact">
<div class="container">
<div class="contact-wrap text-center">
<h1 class="contact-header">CONTACT</h1>
<hr class="contact-line">
<form method="post" action="#">
<div class="row">
<div class="col-md-12">
<input type="text" id="name" name="name" required="required" placeholder="Enter your name here"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="email" id="email" name="email" placeholder="yourname#example.com" required="required"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea id="message" name="message" required="required" data-minlength="20"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-default" id="submit-button" />
</div>
</div>
</form>
</div>
</div>
</div>
<footer>
<ul class="footer-menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</footer>
Help much appreciated,
Thanks,
Rob
you forget add font-awesome css
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
https://codepen.io/anon/pen/dXEjbB?editors=1100
Related
I am working on project where in final result, I need to have like this
As you can see in modal, there is background-image and 2 icons, my problem is I don't know how to make it,
I did a div with image background but for icons I have them in psb format and I don't know how to put them on the background in beautiful way .
I tried to screen part of icon and put it but it wasn't good
<section id="about">
<div class="container-fluid mt-0" style="background-image: url(background.png);background-size:cover;height:550px">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading mt-5">Nos activités</h2>
</div>
</div>
<div class="row text-center" >
<div class="col-md-6 image" >
<img src="icon1.png">
</div>
<div class="col-md-6" style="padding-top: 100px">
<img src="icon2.png">
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading ">Nos dernières réalisataions</h2>
</div>
</div>
</div>-->
</section>
This is the structure I'm doing - just replace the images and add the font type
.activities {
background-image: url('http://inspirationhut.net/wp-content/uploads/2013/05/61.png');
background-position: center;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.activities .title {
margin: 0;
padding: 25px 0;
color: #5ABF28;
font-weight: bold;
}
.activities .row {
min-height: calc(100vh - 135px);
align-items: center;
}
.activities .activity {
display: block;
text-decoration: none;
margin: 10px auto;
}
.activities .activity p {
font-weight: bold;
color: #999;
}
.activities .activity button {
width: 30px;
height: 30px;
line-height: 0;
border-radius: 100%;
padding: 0;
margin: 0;
outline: 0;
background: none;
border: 2px solid #aaa;
font-size: 20px;
color: #999;
padding-bottom: 10px;
}
.activities .activity:hover p,
.activities .activity:hover button {
color: #5ABF28;
border-color: #5ABF28;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="activities text-center">
<div class="container">
<h2 class="title pt-5">Nos activités</h2>
<div class="row">
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/in/en/images/products/smycka-artificial-flower__0903311_PE596728_S5.JPG?f=s" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">entretien de jardin</p>
<button>...</button>
</a>
</div>
<div class="col-sm">
<a href="#" class="activity">
<img src="https://www.ikea.com/us/en/images/products/smycka-artificial-flower-rose-white__0903190_PE596774_S5.JPG" alt="icon 1" height="120" />
<p class="text-uppercase mt-3">creation de jardin</p>
<button>...</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
Trying to create a css menu:
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_menu_row">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="shop_menu_container">
<div class="category">
<button class="dropdown">
Face Makeup
</button>
</div>
<div class="category">
<button class="dropdown">
Eye Makeup
</button>
<div class="category-content">
Cake Eyeliner
T-shirts
</div>
</div>
<div class="category">
<button class="dropdown">
Lip Makeup
</button>
<div class="category-content">
Luminized Lips
Lip Pencil
</div>
</div>
<div class="category">
<button class="dropdown">
Accessories
</button>
<div class="category-content">
Eye Lashes
Palletes
</div>
</div>
<div class="category">
<button class="dropdown">
Brushes
</button>
<div class="category-content">
Synthetic Vegan Brushes
</div>
</div>
<div class="category">
<button class="dropdown">
Dermalogica
</button>
<div class="category-content">
Age Smart
Clear Start
Daily Defense
Powerbright
Skin Health
System Medibac Clearing
Ultracalming
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper"></div>
</div>
</div>
</div>
</div>
</div>
With this css:
.shop_menu_row {
z-index: 1000;
}
.shop_content_row {
position: relative;
}
.shop_menu_container {
overflow: hidden;
background-color: #ffffff;
font-family: Arial;
width: 80%;
max-width: 80%;
display: flex;
justify-content: center;
margin: auto;
}
.shop_menu_container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: capitalize;
}
.category {
overflow: hidden;
/*margin: 0px auto;*/
margin: 0px 0px;
width: 12%;
display: inline-block;
text-align: center;
}
.category .dropdown {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.shop_menu_container a:hover, .category:hover .dropdown {
background-color: red;
}
.category-content {
display: none;
position: relative;
background-color: #ffffff;
min-width: 160px;
z-index: 1;
text-align: center;
}
.category-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.category-content a:hover {
background-color: red;
opacity: 1;
}
.category:hover .category-content {
display: block;
}
On hover category, entire content under (next div row) shifts down and up according to hover:
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_content_row">
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper"></div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-9">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element vc_align_center">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_shadow_border vc_box_border_grey">
<img width="960" height="640" src="https://website.com/wp-content/uploads/2017/08/brush-791306_960_720.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://website.com/wp-content/uploads/2017/08/brush-791306_960_720.jpg 960w, https://website.com/wp-content/uploads/2017/08/brush-791306_960_720-300x200.jpg 300w, https://website.com/wp-content/uploads/2017/08/brush-791306_960_720-768x512.jpg 768w" sizes="(max-width: 960px) 100vw, 960px">
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
Tried fixing this with z-index and position for both but can't seem to get it to work...
Any ideas?
Thank you
Sorry for the long code
the rows are constructed with visual-composer
Instead of using position: relative; you should use position:absolute.
This way the position of the open-menu will not interfere with the rest of your page:
.category-content {
...
position: absolute;
...
}
Note that you have other positions problems there what I didn't fix, you might have them fixed in your original code, probably some css is missing here.
.shop_menu_row {
z-index: 1000;
}
.shop_content_row {
position: relative;
}
.shop_menu_container {
overflow: hidden;
background-color: #ffffff;
font-family: Arial;
width: 80%;
max-width: 80%;
display: flex;
justify-content: center;
margin: auto;
}
.shop_menu_container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: capitalize;
}
.category {
overflow: hidden;
/*margin: 0px auto;*/
margin: 0px 0px;
width: 12%;
display: inline-block;
text-align: center;
}
.category .dropdown {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.shop_menu_container a:hover, .category:hover .dropdown {
background-color: red;
}
.category-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
z-index: 1;
text-align: center;
}
.category-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.category-content a:hover {
background-color: red;
opacity: 1;
}
.category:hover .category-content {
display: block;
}
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_menu_row">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="shop_menu_container">
<div class="category">
<button class="dropdown">
Face Makeup
</button>
</div>
<div class="category">
<button class="dropdown">
Eye Makeup
</button>
<div class="category-content">
Cake Eyeliner
T-shirts
</div>
</div>
<div class="category">
<button class="dropdown">
Lip Makeup
</button>
<div class="category-content">
Luminized Lips
Lip Pencil
</div>
</div>
<div class="category">
<button class="dropdown">
Accessories
</button>
<div class="category-content">
Eye Lashes
Palletes
</div>
</div>
<div class="category">
<button class="dropdown">
Brushes
</button>
<div class="category-content">
Synthetic Vegan Brushes
</div>
</div>
<div class="category">
<button class="dropdown">
Dermalogica
</button>
<div class="category-content">
Age Smart
Clear Start
Daily Defense
Powerbright
Skin Health
System Medibac Clearing
Ultracalming
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper"></div>
</div>
</div>
</div>
</div>
</div>
<div>Content under menu</div>
body {
font-family: 'Ubuntu', sans-serif;
background-color: #0d0d0d !important;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container{
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
color: #ccc !important;
}
.toper {
padding: 100px;
background: #071931;
color: #fff;
}
.main {
background: #121212;
border-radius: 2px;
margin-top: -60px;
color: #fff;
padding: 15px 15px;
}
.container-first {
background: #2a2a2a;
margin: 0px 0px 15px 0px;
padding: 5px;
}
.breadcrumb {
margin: 0px;
background: #2a2a2a;
}
.social img
{
margin-right: 15px;
padding: 2px;
background: #ccc;
border-radius: 5px;
}
#media screen and (max-width: 992px) {
.social img {
margin-top: 10px;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.margin-bottom-small
{
margin-bottom: 10px;
}
.margin-bottom-small::before
{
content: '';
display: table;
}
.welcome-header
{
padding: 15px 20px 15px 20px;
background: #2d2d2d;
border-radius: 3px;
margin: 10px;
box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text
{
padding: 10px;
margin: 10px;
color: #ccc;
}
.welcome-action {
padding: 15px 0px 15px 20px;
background: #4d4d4d;
color: #ccc;
letter-spacing: 5px;
border-radius: 3px;
}
.bluer {
padding: 15px;
background: #046092;
border-radius: 3px;
font-weight: 500;
}
.section-bluer
{
padding: 0px;
margin-top: 15px;
}
.section-container
{
padding: 0px;
}
.section-first
{
background: #1c1c1c;
padding: 10px;
margin: 0px;
}
.section-picture
{
padding: 5px;
text-align: center;
}
.section-picture > img
{
border: 1px solid #016d9b;
}
.section-this p
{
color: #ccc;
font-size: 12px;
}
.section-this h4 a
{
color: #87b8d7;
font-weight: 500;
}
.section-this hr
{
border: none;
border-top: 1px dotted #444;
}
.section-count {
font-size: 12px;
}
.small-text {
font-size: 10px;
}
.section-last-post
{
padding: 0px;
}
.zero-padding
{
padding: 0px;
}
#media (min-width: 992px)
{
.last-topic-img
{
padding: 0px;
}
.section-count
{
padding: 0px;
}
}
.last-topic p
{
margin-bottom: 2px;
}
.abox
{
background: #282828;
border-radius: 2px;
border: 1px solid #282828;
padding: 5px;
padding: 5px 0px 5px 10px;
margin-right: 0px;
margin-top: 15px;
}
.popular-autors p
{
margin: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<main class="container main">
<div class="container-fluid container-first row">
<div class="col-lg-9 col-md-12">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
<div class="col-lg-3 col-md-12 my-auto">
<div class="float-lg-right text-center social">
<img src="fb.png" />
<img src="tw.png" />
<img src="g.png" />
</div>
</div>
</div>
<div class="container-fluid welcome">
<div class="margin-bottom-small"></div>
<header class="welcome-header">
Witaj eeeeeeeeeeeee | Kody, Porady | Gry online
</header>
<div class="welcome-text">
<small>Zarejestruj się, aby otrzymać dostęp do wszystkich funkcjonalności forum.</small>
</div>
<div class="welcome-action">
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-log-in"></span> Zaloguj się</button>
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-fire"></span> Zarejestruj się</button>
</div>
</div>
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik yyyyyNews - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid">
<div class="row">
<div class="col-lg-9 zero-padding">
<div class="container-fluid">
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
<div class="row section-bluer">
<div class="bluer">
Projektyyyyyyyyyy
</div>
<div class="container-fluid section-container">
<div class="row section-first">
<div class="col-lg-1 section-picture my-auto">
<img src="fb.png" />
</div>
<div class="col-lg-8 section-this my-auto">
<h4>League of Legends</h4>
<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
<hr>
Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów,
</div>
<div class="col-lg-1 section-count text-center my-auto small-text">
<b>230683</b> tematy
<b>1246366</b> odpowiedzi
</div>
<div class="col-lg-2 section-last-post my-auto">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto last-topic-img text-center">
<img src="fb.png" />
</div>
<div class="col-lg-8 small-text last-topic my-auto text-center">
<p>Przerwa techniczna 09-05-2…</p>
<p>Przez Krystian</p>
<p>9 maj</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
</div>
</div>
<div class="col-lg-3 zero-padding">
<div class="container-fluid">
<div class="row-fluid abox">
Reklama
</div>
</div>
<div class="container">
<div class="row abox">
Popularni Autorzy
</div>
</div>
<div class="container">
<!-- /////////////////////////////////////////////////////////////////////////////Początek autora popularnego -->
<div class="row text-center popular-autors" >
<div class="col-xl-1 my-auto">
<p>1</p>
</div>
<div class="col-xl-2 my-auto">
<img src="fb.png" />
</div>
<div class="col-xl-9 my-auto">
<p>Misiegg</p>
<p><span class="badge badge-pill badge-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 54</span></p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC autora popularnego -->
</div>
<div class="row abox">
Ostatnie Posty
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
</div>
</div>
</main>
As you can see it's:
And it it looks good after I change <div class="row section-bluer"> to <div class="row-fluid section-bluer">
Why is there row-fluid needed?
And
Why there is free space from left side? I can't fix it no matter what I try to do.
And generally what is the difference between row and row-fluid?
I look for this in documentation https://v4-alpha.getbootstrap.com/layout/grid/, every page, and there is absolutely no information about this.
And everywhere in code in bootstrap 4 documentation is used row, never row-fluid Why?
Why in my example I need row-fluid? What is difference in general between these two?
There are too many nested container/container-fluid. You only need 1 outer container, and nested columns should always be placed directly in .row.
Pseudo code...
container
row
col-*
row
col-*
col-*
/row
/col
/row
/container
I've created a login page, everything seems normal when the page is maximized but when I'm on xs and sm sized screen my footer and content area goes inside of each other and there's a gap at the bottom how may I solve this problem?
https://jsfiddle.net/tLhy3av1/
Full Code:
.navbar-default.navbar-fixed-top {
background-color: #FFFFFF;
border-color: #E7E7E7;
font-family: gesta;
font-size: 20px;
padding-bottom: 10px;
}
.container.top {
margin-top: 50px;
}
.navbar-header.topHeader {
margin-left: 50%;
}
.mid {
width: 100%;
height: 497px;
background-color: #F1F2F4;
margin-top: 110px
}
.myFooter {
margin-bottom: 0px;
width: 100%;
height: 50px;
background-color: #2F2F2F;
border-top: 2px inset #F1F2F4;
}
.formSignIn {
width: 25%;
height: 100%;
margin: 60px auto 30px auto;
}
.form-signin-heading {
color: #8F95A3;
font-weight: 400;
}
.btn {
font-size: 1.1em;
background-color: #F04B14;
border: 1px solid #CE3D0D;
background-color: #f04b14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border-radius: 0;
text-align: center;
}
.btn:hover {
background-color: #F04B14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border: 1px solid #CE3D0D;
background-color: #F47E57;
}
.forget {
margin-top: 10px;
float: right;
}
a {
font-weight: 400;
color: #2693CE;
}
a:hover {
font-weight: 400;
color: #2693CE;
}
.checkbox {
display: inline-block;
}
.formSignIn p {
margin-top: 30px;
text-align: center;
}
#name {
text-align: center;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
font-size: 15px;
}
#bottomLinks a {
text-decoration: none;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
}
#bottomLinks a:hover,
bottomLinks a:focus,
bottomLinks a:active {
text-decoration: underline;
color: #535865;
font-family: arial;
font-weight: 400px;
}
.break {
clear: both;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container top">
<div class="navbar-header topHeader">
<a class="navbar-brand" href="index.html">Logo</a>
</div>
</div>
</nav>
<div class="container mid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="form-signin formSignIn">
<h4 class="form-signin-heading">Log in</h4>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me
</label>
</div>
<div class="forget">
Forgot password?
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p>Not a member yet? Sign Up
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p id="name">© Biz Yapalım <span id="bottomLinks"> Privacy Terms</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class "break">
</div>
<footer class="container myFooter">
</footer>
<!--Javascript-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
On your form set width to px or some other fixed value since percentage is from the width of a window and will always be a trouble:
.formSignIn {
width: 200px; // 25%
}
Beside that, since you are covering more resolutions set some properties through media queries where you can stay with % value.
I am fairly new to web development and I am trying to stretch the footer section horizontally on my website so, but instead it is appearing as a box. I have repeatedly tried changing the background of every div of the code but things are not working out. As a troubleshooting step I also tried this.I am using Bootstrap.
Here is my HTML:
<div role="navigation" style="background-color: blue">
<div class="container">
<footer class="container-fluid" id="contact" style="width: 100%;">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 boxes">
<div class="contact-box">
<div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
<div class="contact-details pull-left">
221 Baker Street
</div>
</div>
<div class="contact-box extra-left-padding">
<div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
<div class="contact-details pull-left">
fun#funny.nl<br />
000-000-000
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<span class="copyright">© Hello!</span>
</div>
</div>
</footer>
</div>
</div>
And my CSS:
footer {
background-color: #002776;
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
color: #F0F0F0;
font-weight: 300;
font-size: 14px;
}
footer h2 {
margin: 0 0 40px;
font-weight: 400;
}
footer div.boxes {
text-align: center;
}
footer div.contact-box {
display: inline-block;
margin-bottom: 40px;
width: 280px;
vertical-align: top;
}
#media screen and (max-width: 767px) {
footer div.contact-box {
width: 90%;
}
}
footer div.contact-box.extra-left-padding {
padding-left: 80px;
}
#media screen and (max-width: 767px) {
footer div.contact-box.extra-left-padding {
padding-left: 0;
}
}
footer div.contact-box div.contact-icon {
background-color: #0038a9;
padding: 6px;
margin: 0 20px 20px 0;
text-align: center;
font-size: 2em;
}
footer div.contact-box div.contact-details {
text-align: left;
line-height: 1.75em;
}
#media screen and (max-width: 767px) {
footer div.contact-box div.contact-details {
font-size: 12px;
}
}
footer span.contact-link {
display: inline-block;
padding: 0 10px 70px;
}
footer a {
color: #F0F0F0;
}
footer a:hover {
color: #00a1de;
}
footer span.copyright {
color: #999;
display: block;
text-align: center;
font-size: 14px;
}
footer span.copyright img {
max-width: 75px;
position: relative;
top: -2px;
}
HTML code must be only :
Css is good.
<footer class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 boxes">
<div class="contact-box">
<div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
<div class="contact-details pull-left">
221 Baker Street
</div>
</div>
<div class="contact-box extra-left-padding">
<div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
<div class="contact-details pull-left">
fun#funny.nl<br />
000-000-000
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<span class="copyright">© Hello!</span>
</div>
</div>
</footer>