body {
font-family: 'Ubuntu', sans-serif;
background: #0d0d0d;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container {
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
margin-bottom: 50px;
}
.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;
}
.container-first-right {
padding-top: 2px;
}
#media screen and (max-width: 768px) {
.container-first-right {
float: none !important;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.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-first {
background: #1c1c1c;
}
.section-picture {
vertical-align: middle;
padding: 5px;
}
.section-picture>img {
border: 1px solid #016d9b;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<main class="container main">
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid row">
<div class="col-sm-8 section-bluer">
<div class="bluer">
Projekty Firaszka
</div>
<div class="row section-first">
<div class="col-sm-1 section-picture">
<img src="fb.png" />
</div>
<div class="col-sm-8 section-this">
asdasdas
</div>
<div class="col-sm-3 section-last-post">
asdasd
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</main>
</body>
</html>
As you can see
This is the problem.
Row in row and row section-first" goes a little bit beyong previous row
Tried many things but completly no Idea how to fix it.
It's problem with the width of this rows that doesn't fit previous row.
Bootstrap class .row has margin-left & margin-right of -15px.
You need to compensate this by removing margin-left & margin-right. Like this:
.section-first {
margin: 0;
}
or
.section-first {
margin-left: 0;
margin-right: 0;
}
Plz correct your bootstrap html structure like :
container > row > col--
or
container-fluid > row-fluid > col--
you put "row" with "container" its not correct format you must create like given structure :-
<div class="container">
<div class="row">
<div class="col-md-5"></div>
</div>
</div>
your html code is here
enter link description here
Set .section-first margin to 0......simple :)
.section-first {
margin: 0;
}
Related
Can you help me with responsive page? Look here http://trenixout.eu/prodej.html
(its for my school project) The box with images make problems... I dont know how to solved this can you help me please someone?
https://upload.hicoria.com/files/g9EpJt6w.png
.background3 {
background-color: #e8e8e8;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
}
.wrapper {
width: 905px;
margin: 20px auto;
padding: 20px;
}
.wrapper h1 {
display: inline-block;
background-color: #fff;
color: #000;
font-size: 15px;
font-weight: normal;
text-transform: uppercase;
padding: 4px 20px;
float: left;
border-radius: 50px;
box-shadow: -2px 3px 24px -2px rgba(0,0,0,0.20);
}
.clear {
clear: both;
}
.veci {
margin: 20px 0;
}
.vec {
background-color: #fff;
float: left;
margin: 0 10px 10px 0;
width: 205px;
padding: 10px;
box-shadow: 10px 6px 16px 1px rgba(0,0,0,0.58);
}
.vec img{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.vec h2 {
font-size: 12p;
display: block;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
}
.vec button {
border: 1p solid #000;
padding: 4px 14px;
background-color: #fff;
color: #000;
text-transform: uppercase;
flex: right;
margin: 5px 0;
font-weight: 400;
cursor: pointer;
border-radius: 50px;
}
.vec button:hover {
border: 1p solid #000;
padding: 4px 14px;
background-color: #000;
color: #fff;
text-transform: uppercase;
flex: right;
margin: 5px 0;
font-weight: 400;
cursor: pointer;
border-radius: 50px;
}
.vec button:focus {
outline: none;
}
.vec span {
float: right;
}
.vec p {
font-size: 14px;
}
#media screen and (max-width: 900px){
.wrapper {
width: 805px;
margin: 20px auto;
padding: 20px;
}
.background3 {
height: 150vh;
}
}
#media screen and (max-width: 700px){
.vec {
margin: 0 5px 10px 0;
width: 205px;
padding: 10px;
}
.background3 {
height: 150vh;
}
.wrapper {
width: 605px;
margin: 20px auto;
padding: 20px;
width: 80%;
}
}
#media screen and (max-width: 600px){
.background3 {
height: 175vh;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Prodej domů • Prodejdum.cz</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="author" content="David Laibl">
<meta http-equiv="refresh" content="100">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#300&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
</head>
<body>
<div class="background3">
<nav>
<div class="logo"><h1>ProdejDum.cz</h1></div>
<div class="menu">
Domů
<a class="active" href="prodej.html">Prodej</a>
O Nás
Kontakt
Kvalita
</div>
<div class="hambac">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<br><br><br>
<div class="wrapper">
<h1>Naše aktuální nabídka</h1>
<div class="clear"></div>
<div class="veci">
<div class="vec">
<img src="images/dva.png" alt="">
<br>
<h2>Rodinný dům 4+1</h2>
<p>Cena: 2 750 000 Kč</p>
<br>
<button class="pridat" type="button" autofocus onclick="alert('Produkt byl přidán do košíku.')">Koupit</button>
</div>
<div class="vec">
<img src="images/jedna.png" alt="">
<br>
<h2>Rodinný dům 5+1</h2>
<p>Cena: 3 250 000 Kč</p>
<br>
<button class="pridat" type="button" autofocus onclick="alert('Produkt byl přidán do košíku.')">Koupit</button>
</div>
<div class="vec">
<img src="images/tri.png" alt="">
<br>
<h2>Rodinný dům 5+2</h2>
<p>Cena: 4 250 000 Kč</p>
<br>
<button class="pridat" type="button" autofocus onclick="alert('Produkt byl přidán do košíku.')">Koupit</button>
</div>
<div class="vec">
<img src="images/ctyry.png" alt="">
<br>
<h2>Rodinný dům 6+1</h2>
<p>Cena: 4 200 000 Kč</p>
<br>
<button class="pridat" type="button" autofocus onclick="alert('Produkt byl přidán do košíku.')">Koupit</button>
</div>
</div>
</div>
</div>
</body>
</html>
"It looks like your post is mostly code; please add some more details."
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
if you mean having the images fit full width in smaller screen size you can adjust the width to 100% for the .vec # 700px
#media screen and (max-width: 700px){
.vec {
margin: 0 5px 10px 0;
width: 100%;
padding: 10px;
}
}
Try to use these classes on your picture's parent
<div class="col-12>" for a full width in screen <576px,
<div class="col-sm-12>" for a full width in screen ≥576px,
<div class="col-md-12>" for a full width in screen ≥768px,
<div class="col-lg-12>" for a full width in screen ≥992px,
<div class="col-xl-12>" for a full width in screen ≥1200px.
Make sure that all of the pictures are in the same div so that they are responsive no matter what size of your display is and instead of using 12 for a full width, you can youse 6 so that 2 pictures will be displayed in the same line.
For more about column you can check here Bootstrap Grid System
You may solve your issue with flex and remove float.
.veci {
/* display: block; */
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.vec {
background-color: #fff;
/* float: left; */
margin: 0 10px 10px 0;
width: 205px;
padding: 10px;
box-shadow: 10px 6px 16px 1px rgba(0,0,0,0.58);
}
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I am creating a footer used in a layout on every page. The footer has two div tags that look like buttons. The problem i am running into is the button are smaller on some screens and larger on others. It looks like if the content of the page does not take the full height of the screen, the footer buttons are the correct size. If the content of the page is over the full height of the screen the buttons are smaller. I believe they should stay the same height.
Here is some screenshots:
.footer {
bottom: 0;
background-color: #EEEEEE;
width: 100%;
height: 100%;
}
.footer-container {
margin: 0 auto;
max-width: 1200px;
padding-bottom: 15px;
border-bottom: 1px solid #cccccc;
}
.footer-list {
display: flex;
list-style-type: none;
justify-content: flex-end;
margin: 0;
padding-top: 15px;
color: #444444;
}
.footer-left {
margin-right: auto;
padding-top: 15px;
padding-left: 10px;
}
.footer-item {
font-size: .9rem;
margin-right: 1rem;
padding-top: 9px;
}
.footer-button {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.9rem;
margin: 2px 2px;
cursor: pointer;
border-radius: 4px;
}
.footer-help-center {
background-color: #0B5C8E;
border: 2px solid #0B5C8E;
color: white;
padding: 5px 30px 5px 30px;
}
<div class="footer">
<div class="footer-container">
<div class="footer-list">
<li class="footer-left">
<img src="~/content/images/logo-icon.png">
</li>
<li class="footer-item">
<div class="footer-button footer-help-center">Help Center</div>
</li>
<li class="footer-item">
<a href="#Url.RouteUrl(" ContactUs ")">
<div class="footer-button footer-contact-us">Contact Us</div>
</a>
</li>
</div>
</div>
</div>
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
rem: Relative to font-size of the root element
CSS Units
From this I can say when you are using rem which could be depended on root element font size or browser font size. That will make your website renders bit different between browsers.
For one you are missing the element <ul> wrapping your <li>. After that I would suggest to clean up elements that don't need to be there, take a look at my example. Like you don't need to have a div inside the <a> element.
.footer {
bottom: 0;
background-color: #EEEEEE;
width: 100%;
height: 100%;
}
.footer-container {
margin: 0 auto;
max-width: 1200px;
padding-bottom: 15px;
border-bottom: 1px solid #cccccc;
}
.footer-list {
display: flex;
list-style-type: none;
justify-content: flex-end;
margin: 0;
padding-top: 15px;
color: #444444;
}
.footer-left {
margin-right: auto;
padding-top: 15px;
padding-left: 10px;
}
.footer-item {
font-size: .9rem;
margin-right: 1rem;
padding-top: 9px;
}
.footer-button {
text-align: center;
text-decoration: none;
font-size: 0.9rem;
margin: 2px 2px;
cursor: pointer;
border-radius: 4px;
}
.footer-help-center {
background-color: #0B5C8E;
border: 2px solid #0B5C8E;
color: white;
padding: 5px 30px 5px 30px;
}
.footer-contact-us {
background-color: deepskyblue;
border: 2px solid #0B5C8E;
color: white;
padding: 5px 30px 5px 30px;
}
<div class="footer">
<div class="footer-container">
<ul class="footer-list">
<li class="footer-left">
<img src="~/content/images/logo-icon.png">
</li>
<li class="footer-item">
<a class="footer-button footer-help-center">Help Center</a>
</li>
<li class="footer-item">
<a href="#Url.RouteUrl(" ContactUs ")" class="footer-button footer-contact-us">
Contact Us
</a>
</li>
</ul>
</div>
</div>
I tried playing around a bit but can't seem to replicate exactly what you are seeing other than the text wrapping when the window gets narrow. The css for footer-contact-us is missing but I assume it's about the same as footer-help-center.
If you want the buttons to always be the same height, why not just tell them to be?
.footer-button {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.9rem;
margin: 2px 2px;
cursor: pointer;
border-radius: 4px;
height:20px;
line-height:20px;
}
You can use this code
<!doctype html>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
.footer {
bottom: 0;
background-color: #EEEEEE;
width: 100%;
height: 100%;
}
.footer-container {
margin: 0 auto;
max-width: 1200px;
padding-bottom: 15px;
border-bottom: 1px solid #cccccc;
}
.footer-list {
display: flex;
list-style-type: none;
justify-content: flex-end;
margin: 0;
padding-top: 15px;
color: #444444;
}
.footer-left {
margin-right: auto;
padding-top: 5px;
padding-left: 10px;
}
.footer-item {
margin-right: 1rem;
}
.footer-button {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.9rem;
margin: 2px 2px;
cursor: pointer;
border-radius: 4px;
}
.footer-help-center.success {
background-color: #0B5C8E;
border: 2px solid #0B5C8E;
color: white !important;
padding: 5px 30px 5px 30px;
font-size: 14px;
cursor: pointer;
}
.footer-contact-us.info {
background-color: #33691e;
border: 2px solid #33691e;
color: white !important;
padding: 5px 30px 5px 30px;
font-size: 14px;
cursor: pointer;
outline: none;
box-shadow: none;
text-decoration: none;
}
</style>
</head>
<body>
<div class="footer">
<div class="footer-container">
<div class="footer-list">
<li class="footer-left">
<img src="~/content/images/logo-icon.png">
</li>
<li class="footer-item">
<a class="btn success footer-button footer-help-center">Help Center</a>
</li>
<li class="footer-item">
<a class="btn info footer-button footer-contact-us" href="#Url.RouteUrl(" ContactUs ")">Contact Us</a>
</li>
</div>
</div>
</div>
<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>
body {
font-family: 'Ubuntu', sans-serif;
background: #0d0d0d;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container{
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
margin-bottom: 50px;
}
.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;
}
.container-first-right {
padding-top: 2px;
}
#media screen and (max-width: 768px)
{
.container-first-right {
float: none !important;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.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-first
{
background: #1c1c1c;
margin: 0px;
padding: 10px;
}
.section-picture
{
padding: 5px;
height: 100%;
text-align: center;
}
.section-picture > img
{
border: 1px solid #016d9b;
vertical-align: middle;
}
.section-this p
{
color: #ccc;
font-size: 12px;
}
.section-this h4 a
{
color: #87b8d7;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<main class="container main">
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid row">
<div class="col-sm-8 section-bluer">
<div class="bluer">
Projekty MPCforum.pl
</div>
<div class="row section-first">
<div class="col-sm-1 section-picture">
<img src="fb.png" />
</div>
<div class="col-sm-8 section-this">
<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-sm-3 section-last-post">
asdasd
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</main>
</body>
</html>
It is something like this:
And as you can see I want this image to have vertical align middle.
I tried to add it with css, tried setting this column height not 100% but 100px or more. Make this img display inline-block etc....
And nothing works good. And have no Idea what to do now with it and make this works.
If you want to keep your current HTML structure you could add the image as a pseudoelement and center it vertically. It's not a pretty solution, and you'll need to use media queries to undo this. Best to view the snippet full screen.
body {
font-family: 'Ubuntu', sans-serif;
background: #0d0d0d;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container {
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
margin-bottom: 50px;
}
.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;
}
.container-first-right {
padding-top: 2px;
}
#media screen and (max-width: 768px) {
.container-first-right {
float: none !important;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.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-first {
background: #1c1c1c;
margin: 0px;
padding: 10px;
}
.section-picture {
padding: 5px;
height: 100%;
text-align: center;
}
.section-picture>img {
border: 1px solid #016d9b;
vertical-align: middle;
}
.section-this p {
color: #ccc;
font-size: 12px;
}
.section-this h4 a {
color: #87b8d7;
font-weight: 500;
}
.section-first {
position: relative;
}
.section-first::before {
position: absolute;
display: block !important;
width: 40px;
height: 40px;
content: url(https://placehold.it/40x40) !important;
top: 50%;
transform: translateY(-50%);
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
<main class="container main">
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid row">
<div class="col-sm-8 section-bluer">
<div class="bluer">
Projekty MPCforum.pl
</div>
<div class="row section-first">
<div class="col-sm-1 section-picture">
</div>
<div class="col-sm-8 section-this">
<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-sm-3 section-last-post">
asdasd
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</main>
</body>
</html>
The column/div containing the image is currently only the height of the image because the div is floated, as ovokuro mentioned. To make it match the height of your other columns, you can first adjust the height of the column/div (col-sm-1) then manipulate the image's positioning inside it.
If a simple situation where all your rows will have a fixed height, you could try setting col-sm-1 to the needed row height (e.g. 100px) and then adjusting the image's position with margin/padding/etc. as needed.
If your rows will vary in height, here are a few approaches that have worked well:
HTML/CSS: Making two floating divs the same height
https://css-tricks.com/fluid-width-equal-height-columns/
Hope one of these works out!
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">