Develop Reference

how to hide sidebar when mouse cursor goes on menubar

I want to hide sidebar when mouse cursor goes on menu bar which is in navigation bar to hide the sidebar.
I tried to hide it many ways but it did not worked for me so looking for any alternative.
Side should be hide once the mouse curser is on the menu bar
Here is my CSS code :
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.navbar {
width: 100%;
height: 78px;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
text-align: center;
margin-inline-start: 45px;
padding: 26px;
color: white;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
.wrapper{
display: flex;
position: relative;
}
.wrapper .sidebar{
width: 150px;
top: 78px;
height: 100%;
background: #4b4276;
padding: 0px 0px;
position:fixed;
transition: all 0.5s ease ;
}
.wrapper .sidebar ul li{
padding: 25px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(15, 3, 85, 0.05);
text-align: center;
transition: 0.3s;
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 45px;
}
.sub-menu-1{
display: none;
}
.wrapper .sidebar ul li:hover .sub-menu-1 {
display: block;
position: absolute;
left: 150px;
width: 250px;
top: 0px;
height: 92%;
border-radius: 2px;
box-shadow: 2px 2px 10px ;
background-color:#ffffff;
}
.wrapper .sidebar ul li .dropdown{
position: relative;
}
.wrapper .sidebar ul li:hover{
background-color:#d59bf6 ;
}
.wrapper .sidebar ul li:hover a{
color: rgb(70, 9, 105);
}
tried to hide the side bar but was unable to do so

The code for my navbar does not work properly

I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

mobile view menu issue?

I implemented the code below, I'm facing an issue on mobile view when clicking the menu button on mobile didn't show the menu but if I didn't scroll down the menu works,
how can i fix this issue on mobile view
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("body").toggleClass("hidden");
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.centered-logo').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
})
body{height: 3000px;
margin: 0;
padding: 0;
font-family: monospace;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
.hidden{
overflow: hidden;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
top:0;
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">hola</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
I have on mobile view an issue when scroll down and click menu button nothing appear but when I was at the to when click menu will appear the menu item
all I need is when scroll down and up the menu appears
how can I fix this issue

The issue is because you set overflow: hidden to your body, while the nav is part of the page flow. The nav will always be offset relative to it's parent.
Here's an example where overflow: hidden is disabled:
http://jsfiddle.net/u9L50243/ (Toggle the menu and then scroll - You'll notice the navigation scrolls in to, and out of the viewport)
The easiest fix is just to apply position: fixed to your nav bar, in addition to the .responsive-bar.
For example: http://jsfiddle.net/ebcvqds7/

Smart Phone Fixed Nav Bar Not Closing after selection

I have got some great info from this forum and this is my first question so be nice..
I have a top nav bar which is fixed.
The fixed part seems to be working fine but i now have two issues.
In responsive mode when you click the hamburger icon it opens beautifully and you can jump to any anchor on the page ( i am designing a 1 page site). But the nav wont close upon click or tap so i am left with a gaping open nav.
Second problem is when the nav is fixed and i scroll down and go over a form the form fields are displayed on top of the nav bar, in both 960 width & responsive.
I have attached what i think is the code here and any advice would be greatly appreciated.
Cheers
Max
This is the html:
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul>
<span style="color:white">Menu</span>
This is the css:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
This is the java script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>

For first question add this js:
$('nav li>a').on('click', function (e) {
if($(window).width()<600){
menu.slideUp();
}
});
the full code is below:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$('nav li>a').on('click', function(e) {
if ($(window).width() < 600) {
menu.slideUp();
}
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul> <span style="color:white">Menu</span>
</nav>
ul>li>a can be changed with a ID or class as you prefer.
For 2nd question add this css:
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
DEMO

How to make top line shorter than bottom line (within div)

I have an unordered list which contains 3 list items (represented in my example as 3 green boxes). Each box has an image and 3 divs (title,location,price). I'm only concerned with each box's title div.
If the title is long enough so that it produces 2 lines, I want the top line to always be shorter than the bottom line. My demo site seen here shows boxes 1 & 2 with the wrong setup, and box #3 shows the correct setup.
I'm having trouble... this may require js to determine line length and then set the bottom line to be longer. Screen resolution will likely play a role but can't I make the lines consistent across different screen sizes?
Here is one of the list items, I'm interested in the div "titlebox":
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is longer than this line</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</li>
Any help is great, thanks!!
Screenshot attached too:

Here is a JS solution that might work for you in most instances (I say most instances because text characters can have varying widths). It basically splits your sentences into 2 lines with a dynamically inserted <br> tag. Comments in the code:
$(".titlebox").each(function(){
var len = $(this).text().length,
words = $(this).text().split(" "),
line1 = [],
line2 = [],
html = "";
// iterate through each word in the title
$.each(words, function(i,word){
// if line 1's current length plus the length of this word
// is less than half the total characters, add word to line 1
// else add to line 2
// (check index of word to maintain order)
if((line1.join(" ")+" "+word).length < (len/2) && (i == line1.length)){
line1.push(word);
} else {
line2.push(word);
}
});
// concatenate the results with a '<br>' separating the lines
html = line1.join(" ")+"<br>"+line2.join(" ");
// replace the .titlebox content with this new html string
$(this).html(html);
});

html
{
width: 100%;
height: 40%;
}
body
{
background-color: #FFFFFF;
overflow-y: scroll;
overflow-x: hidden;
}
/* JavaScript disabled */
html.no-js .list__item
{
width: 100%;
float: none;
}
html.no-js .list__item img
{
max-width: 9.375rem; /* 150 */
float: right;
margin-left: 1.25rem; /* 20 */
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 25%;
float: left;
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
.whywelove img{
margin-top: 1%;
height: auto;
width: 50%;
}
.font3 {
margin-top: 2%;
color: #030;
font-family: "Times New Roman", Times;
font-size: 8vh;
}
.font4 {
font-size: 3.5vh;
font-weight: bolder;
font-family: "Times New Roman", Times;
color: #002B00;
line-height:25px;
margin-top: -0.5%;
margin-bottom: 2%
}
.vignette {
width: 90%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.vignette2 {
width: 800px;
margin-top:3%;
margin-left:auto;
margin-right:auto;
box-shadow: 75px 75px 50px #defeec inset,-75px -75px 50px #FFFF inset;
height: 600px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
width: 100%;
max-width: 76rem;
font-size: 0.875rem; /* 14 */
line-height: 1.375rem; /* 22 */
margin: 0 auto;
padding: 0.625rem; /* 10 */
}
.container,
.container a
{
color: #cfd7db;
}
.container a:hover
{
color: #fff;
}
h1
{
font-size: 2.5rem; /* 40 */
font-weight: 300;
line-height: 2.875rem; /* 46 */
text-align: center;
margin-bottom: 2.5rem; /* 40 */
}
a.divLink {
text-decoration: none;
}
.list
{
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
width: 32%;
float: left; /* 10 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 0.625em;
padding-bottom: 0.825em;
margin-left:1%;
margin-right:0%;
position:relative;
line-height:40px;
}
.list__item .caption {
position: absolute;
width: 20%;
height: 10%;
top: 30%;
left: 32%;
font-size: 3.3em;
font-weight:bold;
color: red;
}
.list__item__inner
{
width: 100%;
color: #474d51;
background-color: #DEFEEC;
border: 1px groove #F8F8F8;
overflow: hidden;
margin-left:2%;
margin-right:2%;
-webkit-box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
box-shadow: 0 0.125rem 0.313rem rgba( 0, 0, 0, .2 ); /* 2 5 */
}
.list__item figcaption
{
padding: 1.25rem; /* 20 */
}
.img-shadow {
position: relative;
max-width: 100%;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}
.img-shadow img {
float: left;
}
.titlebox{
width: 80%;
height: 10%;
display: inline-block;
font-size: 4.2vh;
font-family: Garamond;
color: #002000;
text-align: center;
line-height: 35px;
font-weight:bold;
margin-top: 5%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
background-color:grey;
}
.locationbox{
width: 80%;
display: inline-block;
font-size: 3.7vh;
text-align: center;
font-weight:bold;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
font-family: Garamond;
color: #002000;
font-style: italic;
}
.pricebox{
width: 80%;
font-size: 4.2vh;
text-align: center;
font-family: Garamond;
font-weight:bold;
color: #002000;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
}
.footer
{
text-align: center;
margin: 2.5rem 0.625rem 0; /* 40 10 */
}
.footer a
{
border-bottom: 1px solid #cfd7db;
}
#media screen and (max-width: 1950px){
.list__item
{
width: 32%;
}
.container
{
padding: 0; /* 10 */
}
.titlebox{font-size:28px;}
.locationbox{font-size:28px;}
.pricebox{font-size:28px;}
}
#media screen and (max-width: 1700px){
.list__item
{
width: 32%;
}
.vignette {
width: 92%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
box-shadow: 15px 15px 40px #defeec inset,-15px -15px 40px #defeec inset;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
padding: -10em; /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
}
#media screen and (max-width: 1440px){
.list__item
{
width: 32%;
}
.container
{
padding: 2.2em /* 10 */
}
.titlebox{font-size:27px;}
.locationbox{font-size:27px;}
.pricebox{font-size:27px;}
nav {
border: 1px solid #ccc;
border-right: none;
border-left-color: #006600;
width: 100%;
margin-bottom: 20px;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #030303;
}
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li:hover {
background: #9cb369;
}
nav ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul li {
flex-grow: 1;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
}
#media screen and (max-width: 64em ) /* 1024 */
{
.list__item
{
margin-right:2%;
margin-left:-1%;
}
.titlebox{font-size:24px;}
.locationbox{font-size:24px;}
.pricebox{font-size:24px;}
.list__item .caption {
font-size: 2em;
}
body
{
padding: 2.5rem 0; /* 40 */
}
.list__item
{
width: 30%; /* 1 item per row */
float: none;
}
#supports ( display: -webkit-flex ) or ( display: -ms-flex ) or ( display: flex )
{
html.no-js .list__item
{
width: 30%;
}
}
html.no-js .list__item img
{
max-width: none;
float: none;
margin-left: 0;
}
}
#media screen and ( max-width: 50em ) /* 800 */
{
.vignette {
height: 400px;
}
.titlebox{font-size:23px;}
.locationbox{font-size:23px;}
.pricebox{font-size:23px;}
.list__item
{
width: 70%; /* 1 items per row */
}
}
#media screen and ( max-width: 40em ) /* 640 */
{
.vignette {
width: 80%
height: 300px;
}
.titlebox{font-size:21px;line-height:25px;}
.locationbox{font-size:21px;}
.pricebox{font-size:21px;line-height:25px;}
.list__item
{
width: 70%;/* 1 items per row */
}
}
<div class="container" role="main">
<ul class="list">
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is <BR/> shorter than this :)</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/c/ce/James_Wadsworth_Rossetter_House_Front_1.jpg)"></p>
<div class="titlebox">Thisssss Lineeeeee is longer too</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.mytickerz.com/wp-content/uploads/prairie-style-house-plans-2.jpg)"></p>
<div class="titlebox">This line is shorter likeeeeeeeee it should be</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</a>
</li>
</ul>
</div>
I'm not really sure if there is any way to limit the top line width. The only way I can think of, is to add a <br/> tag in a place where you would like to break down the title and then just set the text-align: center; for the .titlebox.
<div class="titlebox">This line is <br/> longer than this line</div>