Hoping someone can help me with this. The following menu items below (Get on Amazon etc) change the information on the page within the browser, but the first menu should change the actual page to my index page. For some reason I cannot get it to work
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-- >
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title>Painful Words Dot Com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--
Painful Words
-->
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/painful_main.css">
</head>
<body>
<div id="main-wrapper">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a rel="nofollow" href="http://browsehappy.com">upgrade your raasclaat browser</a> or <a rel="nofollow" href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 affix text-center" style="z-index: 1;">
<h1 class="painful-site-title">
Painful Words
<img src="images/btn-menu.png" alt="main menu" id="m-btn" class="pull-right visible-xs visible-sm" >
</h1>
<ul id="responsive" style="display:none" class="hidden-lg hidden-md"></ul><!-- /.responsive -->
</div>
<div class="menu visible-md visible-lg">
<ul id="menu-list">
<li class="active back-menu">Go Back</li>
<li class="inactive purchase-menu">Purchase</li>
<li class="amazon-menu">Get on Amazon</li>
<li class="google-menu">Get on Google Play</li>
<li class="noble-menu">Get on Barnes & Noble</li>
</ul>
</div><!-- /.menu -->
<div class="image-section">
<div class="image-container">
<img src="images/gone.jpg" id="purchase-img" class="main-img inactive" alt="purchase">
<img src="images/love.jpe" id="amazon-img" class="inactive" alt="amazon">
<img src="images/fam.jpe" id="google-img" class="inactive" alt="google">
<img src="images/fam2.jpe" id="noble-img" class="inactive" alt="noble">
The following code in your http://www.painfulwords.com/js/templatemo_script.js JavaScript file is preventing the link from working.
$("#menu-list a, #responsive a").on('click',function(e){
if(this.className == "external") {
return;
}
// THIS BIT HERE cancels the link's default action
e.preventDefault();
Try giving the link the additional class of external.
Related
I'm having a lot of trouble stopping my header from going transparent whilst scrolling down the page. I'm not sure what is causing it (I used a template), but you can view the code here:
https://github.com/IF-Apps/IF-Charts
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li>Home</li>
<li>IF-Charts</li>
<li>Learn More</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the tutorial. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>
<div align="center">
<h2>Please choose:</h2>
<br />
<span>
<img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;">
<img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;">
</span>
<p>View all charts here.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
Licence | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
I think it has to do with the CSS, but I am not sure.
The problem is that when at the top, the menu items cannot be seen. I just want the header to stay black. You can see the problem here:
https://if-charts.000webhostapp.com/
In your scripts.js file there is a function that adds or removes several things on scroll.
/***************** Header BG Scroll ******************/
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$('section.navigation').addClass('fixed');
$('header').css({
"border-bottom": "none",
"padding": "35px 0"
});
$('header .member-actions').css({
"top": "26px",
});
$('header .navicon').css({
"top": "34px",
});
} else {
$('section.navigation').removeClass('fixed');
$('header').css({
"border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
"padding": "50px 0"
});
$('header .member-actions').css({
"top": "41px",
});
$('header .navicon').css({
"top": "48px",
});
}
});
});
Remove this function entirely.
Change
<section class="navigation">
To
<section class="navigation fixed">
If you want to use the other properties as well add them to the following classes in the CSS file.
header {
border-bottom: none;
padding: 35px 0;
}
header .member-actions {
top: 26px;
}
header .navicon {
top: 34px;
}
You need to add a background color to the navigation.
.navigation {
background: #232731;
}
I have problem with my student buttons inside this html file..can anyone help me? i take this code from the internet. when i click the button, it doesnt redirect me to the login.php..
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Supervision System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, image, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 02</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 03</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 04</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 05</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 06</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<p class="codrops-demos">
Coordinator
Supervisor
Student//-----right here the problem
</p>
</header>
</div>
</body>
</html>
That's a link, not a button. It should just fine, so long as you intended to write a relative URL.
It looks like you intended to write an absolute URL though and you forgot to include http:// or https:// at the front of it (or possibly // if you wanted a scheme relative URL, which is unlikely since you included a port number).
Student//-----right here the problem
Should work. You forgot the http://
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am fairly new at web design and cannot seem to get a side bar working for my website.
Basically I got my files and code from www.berriart.com/sidr/ and did exactly what they asked, however the side navigation bar is still not working.
All that comes up is blue hyperlinks under my banner, you can see it here: www.justpaste.it/lzhg.
I have pasted my html underneath if anyone could please help me that would be wonderful!
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
</div>
<div class="navbar">
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<ul>
<li>List 1</li>
<li class="active">List 2</li>
<li>List 3</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
</div>
<div class="content">
<div class="posts">1</div>
<div class="posts">2</div>
<div class="posts">3</div>
<div class="posts">4</div>
<div class="posts">5</div>
</div>
<div class="footer">asdfafdsasfsdasfad</div>
</div>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
</pre>
It looks like you forgot to add jQuery.
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
The links on my project working on is not clickable on Internet Explorer but Ok on firefox and chrome. It is essential to support this on IE. I have been researching this for days. I first I put on position:fixed on the body background, but when I removed the position: fixed, my background will not be responsive. Here is the some css
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="container">
<div id="main_corporate">
<img id="logo" src="img/logo.png">
<div id="content_corporate1">
<p >Whether you are hosting a small lunch meeting or a grand banquet, preparing for an event can be a daunting task. The venue set up, the dishes and beverages must all be carefully planned and executed to be able to provide your guests an outstanding dining experience.</p>
<p >Save yourself from all these work and engage a seasoned caterer to do everything for you! Occasions Catering is a full-service caterer that has been delivering unique and exceptional culinary experiences since 2006.</p>
<p >Occasions Catering represents the best culinary experience in Singapore. We are with our clients from the conceptualization of the ideas to the smooth delivery of the event.From high end corporate functions to intimate gatherings, our skilled kitchen and operation teams continuously astonish clients with detailed setups, appetizing meals and first class service.</p>
<p style="margin-right:90px" >Don't just take our word for it. Request for a food tasting session today! </p>
</div>
<div id="socialmed">
<img src="img/facebook.png" >
<img src="img/twitter.png">
<img src="img/instagram.png">
<img src="img/youtube.png">
</div>
<ul id="MenuBar1" class="MenuBarHorizontal2">
<li style="width:70px;"><a href="home.html" >HOME</a></li>
<li><a href="aboutus.html" >ABOUT US</a></li>
</ul>
</div>
<div id="footer" class="clearfix">
<div class="about1">
</div>
<div class="about2">
</div>
<div class="about3">
</div>
</div>
</div>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the jsfiddle of the complete code: http://jsfiddle.net/jethph/TKM9Y/. Sorry for untidy code.
Thanks for your help.
See it or yourself! The meal-category-box div has an inexplicable jump from the title to the rest of the content. We can't work it out?
My code is also shown here:
/* Begin Base */
body {
color: #245a03;
background-color: #e7f5df;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light",
"HelveticaNeue", Helvetica, Arial;
font-size: 17px;
margin: 0;
padding: 0;
height: 100%;
}
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MealMarket</title>
<meta name="description" content="">
<meta name="author" content="" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css'>
<script src="/static/bootstrap/js/bootstrap-alert.js"></script>
<script src="/static/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="">
<div id="container">
<div id="header">
<a href="/"><h1>Meal Market</h1>
<span>Share food, get food, more merry mealtimes</span></a>
</div>
<div id="main" role="main" class="container">
<div id="user-info">
<img src="/static/images/pics/profile-default.jpg">
<div id="user-column-options">
<h3 style="word-wrap:break-word;">
Matt</h3>
<p>Credits: 10</p>
<ul>
<li>Make meal</li>
<li>Find meal</li>
<!--<li>Past meals</li>-->
</ul>
</div>
</div>
<!-- End user info column -->
<div id="stream">
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4><br />
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/22/Apr/2012/05:30">
Fungus food</a></h5>
April 22, 2012, 5:30 a.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
<div class="meal-box-small">
<div class="meal-details">
<p><h5><a href="/meals/matt/21/Apr/2012/19:00">
Lentil stew</a></h5>
April 21, 2012, 7 p.m.
</p>
<p> (View map)</p>
<p style="margin-top: 10px;">
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</p>
</div>
</div>
<div class="clearer"> </div>
</div>
<!-- End user's coming hosted meals div -->
<div class="clearer"> </div>
<div class="clearer"> </div>
<!-- Start other coming meals div -->
<div class="meal-category-box">
<h4>Other Upcoming Meal Invites</h4>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/13/Apr/2012/00:30">
Great flippin' food</a></h5>
</p>
<p>April 13, 2012, 12:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
<div class="meal-box">
<img src="">
<div class="meal-details">
<p><h5><a href="/meals/jervin/29/Apr/2012/04:30">
Veggie curry</a></h5>
</p>
<p>April 29, 2012, 4:30 a.m.<p>
<p> (View map)</p>
<p>Cooked by
<a href="/users/jervin/">
jervin</a>
</p>
<div style="margin-top: 20px;" class="emphasis-box">Click to attend this meal</div>
</div>
</div>
</div>
<!-- End other coming meals div -->
</div>
<div class="clearer"> </div>
</div>
<div id="clearer"> </div>
<footer class="footer">
<hr>
<ul id="footer-links">
<li>About / FAQ</li>
<li>Privacy / Legal</li>
<li>Media</li>
<li>Contact</li>
</ul>
</footer>
</div>
</div> <!-- end of #container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/static/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!--<script defer src="/static/js/plugins.js"></script>
<script defer src="/static/js/script.js"></script>-->
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".collapse").collapse({toggle: false});
});
</script>
<script type="text/javascript">
// On click...
$("#cross-icon").click(function() {
$('#new-user-box p').slideUp("slow")
$('#new-user-box').slideUp("slow");
});
</script>
<script> // Change UA-XXXXX-X to be your site's ID
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
Remove clear: both; from the style for .meal-box-small.
#user-column-options is set to float: left;, so the clear: both; causes .meal-box-small to move below that.
How about the 70px bottom margin on your #header? (The Developer Tools: use them.)
div#header has a margin-bottom of 70px. Decrease that to lessen the space between your title and content.
Make this change in your HTML:
<!-- Start user's coming hosted meals div -->
<div class="meal-category-box">
<h4>Coming Meals that You're Cooking</h4>
<div class="meal-box">
<div class="meal-details">
Just change the div with the class meal-box-small to the class meal-box and all is fine.