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);
}
Related
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
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;
}
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 two different sections with exactly the same CSS code but if you look at the image below, you can see at the width the screen is set to, that the images are all already moved onto a new line (which is what I want) but the categories underneath are still on the same line and get more "squashed" together. How can I make it so the categories move onto a new line like the images do? Thanks in advance.
Image of problem - http://i.imgur.com/u6GnTa1.png
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 class="sectionhead">Best Selling Books</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
<h3 class="secfooter">Mere Bestsellers <span style="color: #ed786a;"><strong>Here</strong></span></h3>
</div>
</div>
<div id="sectionthree">
<div id="containerthree">
<h2 class="sectionhead">Popular Categories</h2>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.sectionhead{
margin: 2em 0 2em 0;
color: #888888;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
#sectionthree {
width: 80%;
top: 0;
right: 0;
}
#containerthree {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.secfooter{
color: #888888;
letter-spacing: 2px;
font-size: 0.85em;
}
.categories{
max-width: 100%;
width: 20%;
padding: 0 1em 0 1em;
display: inline-block;
}
The issue is that your categories divs are set to width: 20% with display: inline-block causing them to remain in columns. First, if you want them to stack on top of each other you either change the width to 100% and/or display to block:
.categories{
display: block;
width: 100%;
}
This will affect the design on desktop so if you're building this responsively you would actually just add:
#media only screen and (max-width: 568px) {
.categories{
display: block;
width: 100%;
}
}
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too