I have a problem with a template. On a large screen, it's look fine, like this:
But when I resize my browser, the content won't push the footer down. Here is a picture:
Here is my code, which is too long so forgive me.
index.php
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author <?php echo date("Y"); ?>
</div>
</div>
</div>
</div>
</footer>
Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color:#233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
How can I solve this, so the page content will push the footer down...at any size of browser.
Any help is appreciated.
Removing position:absolute; from the footer in the css appears to work. Perhaps consider having it set to absolute at wider screen sizes using media queries if having position:absolute is absolutely (pardon the pun) necessary.
I provided a snippet with the absolute positioning removed, as well as the potential addition to a media query, which is commented out, but there to demonstrate.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
/*
****Optional****
footer{
position:absolute;
bottom:0px;
}*/
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color: #233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place
<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author
<?php echo date( "Y"); ?>
</div>
</div>
</div>
</div>
</footer>
The way Bootstrap sees how you want to change sizes for different screen sizes are in the column size identifiers. And each number is a fraction of 12.
<div class="footer-col col-md-4">
means you want the footer to take 4/12 of the screen on devices medium or higher. To designate that you want it to be different on different sizes, you would put something like
<div class="footer-col col-md-4 col-sm-12">
to mean that you want it to take up 4/12 of the screen on medium devices or larger, and 12/12 of the screen on small devices up to medium.
You have inline styling on your header <img> tag.
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
I would recommend trying to use a new class on that <img> tag, then apply a new #media query to adjust height for different screen sizes.
Also, having the .img-responsive class on that element may also be conflicting with the inline height styling.
Add the class "position-relative"
<!-- Footer Starts -->
<div class="container-fluid">
<div class="navbar fixed-bottom position-relative">
<p>You Footer Content<p>
</div>
</div>
<!-- Footer ends -->
Works in Bootstrap v4.3
Related
So normally when I visit for ex "index.html" and I give my a href link in my navbar the class "active" or whatever class and colour it so it defines which page I'm on
so
<a href="index.html" class="active">
and
a.active {
background-color: #009879;
color: white;
}
would just do the trick and highlights the page I'm currently on in the navbar
but I have a section in my index.html which I can go to by clicking on this in the navbar
<a href="index.html#about">
but if I trigger the class="active" for this section, then both the index and the section will be highlighted in my navbar
how do I make it so that when I'm on the section, my index.html loses its class=active and for the section to gain that class?
possibly if this could be done using only CSS!
TL;DR I need a way in CSS/JS that adds/removes the class for whatever element(s) I want it to be on.
Hi, The function you want in your project is called scrollspy and it is achieved with javascript. You can use the bootstrap or create the function in pure javascript. But in order not to reinvent the wheel I show you an example based on a vanilla javascript script from: https://github.com/cferdinandi/gumshoe.
var spy = new Gumshoe('#my-awesome-nav a');
html {
overflow-y: auto;
scroll-behavior: smooth;
}
/* Sets body width */
.container {
max-width: 90em;
width: 88%;
margin-left: auto;
margin-right: auto;
}
/**
* Grid
*/
.grid {
display: grid;
grid-gap: 2em;
grid-template-columns: 30% 70%;
}
#my-awesome-nav {
position: fixed;
}
#my-awesome-nav li.active {
background-color: black;
}
#my-awesome-nav li.active a {
color: white;
}
/**
* Sections
*/
.section {
color: #ffffff;
height: 95vh;
margin: 0;
padding: 2em;
}
#eenie {
background-color: #0088cc;
}
#meenie {
background-color: rebeccapurple;
}
#miney {
background-color: #272727;
}
#mo {
background-color: #f42b37;
}
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe/dist/gumshoe.polyfills.min.js"></script>
<div class="container">
<div class="grid">
<nav>
<ul id="my-awesome-nav">
<li>Eenie</li>
<li>Meenie</li>
<li>Miney</li>
<li>Mo</li>
</ul>
</nav>
<main>
<div class="section" id="eenie">
Eenie...
</div>
<div class="section" id="meenie">
Meenie...
</div>
<div class="section" id="miney">
Miney...
</div>
<div class="section" id="mo">
Mo...
</div>
<p><a data-scroll href="#top">Back to the top</a></p>
</main>
</div>
</div>
I have the following problem. I am trying to create a dropdown menu, and I am using mainly bootstrap for this. It seemed to work at first, but then I realised that the dropdown menu takes up the whole screen width, but I have no idea why. I coloured it red so you can see what I mean exactly. The navbar menu seems to flow over into the dropdown (since I only colour the navbar red, nothing else, but it all becomes red).
The red background is supposed to be only behind the upper nav menu (the upper boxes), not further. It should be white there, - apart from the dropdown boxes.
Here is my code thus far:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Some Title</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
<div class="row">
<div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
<div class="row">
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">Welcome</button>
</div>
</div>
</div>
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">Dropdown</button>
<div class="dropdown-content col-xs-12 nopadding">
Software<br />entwicklung
Qualitats<br />sicherung
</div>
</div>
</div>
</div>
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">Our Company</button>
<div class="dropdown-content col-xs-12 nopadding">
Some Stuff
Some more Stuff
</div>
</div>
</div>
</div>
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">Find us</button>
</div>
</div>
</div>
<div class="dropdown col-xs-12 col-sm-2">
<div class="container-fluid">
<div class="row">
<button class="dropbtn col-xs-12">Contact </button>
</div>
</div>
</div>
</div>
</div> <!-- MENU END -->
<div class="col-xs-12 col-md-2">
<div class="logo_aligner">
<!-- <img src="images/logonav.svg" class="hs-logo" alt="Some Text"> -->
</div>
</div>
</div>
</div> <!-- NAVBAR END -->
</body>
</html>
CSS:
/* Dropdown Button */
.dropbtn {
background-color: #F6F8FB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 100%;
background-color: #F6F8FB;
font-family: AlegreyaSansSC-Light;
font-size: 16px;
color: #637F92;
letter-spacing: 0.52px;
height: 81px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #F6F8FB;
min-width: 160px;
z-index: 1;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
background: rgba(221, 232, 241, 0.95);
}
/*Smartphones */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.dropdown-content {
width: 100%;
text-align: center;
}
.hs-logo {
visibility: hidden;
}
}
/*Tablets */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.hs-logo {
visibility: hidden;
}
.dropbtn {
font-size: 12px;
padding: 0;
}
}
/* Normal Browser resize */
#media screen
and (max-width: 1024px) {
.hs-logo {
visibility: hidden;
}
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 30px;
text-align: center;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
background: rgba(221, 232, 241, 0.95);
}
.hs-logo {
width: 100%;
height: 25px;
}
.nopadding { /* Important for the contents of the dropdown menu, since bootstrap is applied*/
padding: 0 !important;
margin: 0 !important;
}
.logo_aligner {
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
background-color: red;
}
First of all, here is a link to a simple Bootstrap menu, which is great for reference. When working with Bootstrap menus I always inspect these examples.
To your specific example: For overlapping stuff like the dropdown you need some position: absolute; for it to work.
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
top: 80px;
position: absolute;
}
Full example: https://jsfiddle.net/flink1991/566j7bht/
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...
You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting
If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!
Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.
I'm using the js from bootstrap to do a div collapse on a Wordpress gallery page but I can't get the toggle function to work. When you click on another item, the first item doesn't collapse. It stays open. You can see it the link to the dev site: Dev site link
I'm not using the accordion bootstrap setup as I wanted each collapsing div to occupy the same space below the row of triggering links.
I've asked this question from a bootstrap point of view but got no answers. So I'm wondering if there's a way of doing it using Jquery toggleclass?
Bootstrap applies the class 'in' to the expanded item. So I guess I'd need to have toggle class remove that? I found and tried to adapt some Jquery but no luck.
A simplified version of the code is:
<div id="desktop-view">
<div id="gallery-squares-1" class="gallery-squares clearfix">
<a href="#collapseExample-1" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-2" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
<a href="#collapseExample-3" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view">
<div class="img-mouse-over"></div>
</a><!-- .post-gallery-img -->
</div> <!-- .gallery-squares -->
<div id="gallery-expanders-1" class="gallery-expanders clearfix">
<div class="collapse" id="collapseExample-1">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-2">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
<div class="collapse" id="collapseExample-3">
<div class="gallery-content">
<div class="ie-bgsize gallery-content-img"></div>
<h6>Title</h6>
<p>Description</p>
</div> <!-- .gallery-content -->
</div> <!-- .collapse -->
</div> <!-- .gallery-expanders -->
</div>
CSS:
a.gallery-img {
width: 15%;
padding-bottom: 15%;
margin: 0 1.6666666% 1.6666666% 0;
display: block;
float: left;
position: relative;
background-color: #fff;
}
.gallery-content {
background-color: black;
margin-bottom: 1.6666666%;
color: #fff;
padding: 1.6666666%;
}
.gallery-content-img {
width: 98.5%;
padding-bottom: 50%;
margin-bottom: 1.8%;
}
.gallery-content h6 {
color: #fff;
font-size: 18px;
line-height: 1.2em;
margin: 0;
width: 98.5%;
}
.gallery-content p {
font-size: 14px;
line-height: 1.2em;
margin: 1% 0;
width: 98.5%;
}
.gallery-content p:last-child {
margin-bottom: 0;
}
.img-mouse-over {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
background: none;
}
.img-mouse-over:hover,
.img-mouse-over:active {
background: rgba(0, 0, 0, 0.5) no-repeat center center;
}
JQuery I tried:
$('.gallery-squares a').click(function(e){
e.preventDefault();
$('.collapse').removeClass('in');
});
I just can't get it to remove the active class on 'in'. I guess I'd also need to make sure it only removed the 'in' from the current active div and not the one that the click will create?
Thanks in advance for any advice.
you'll have to remove the in class and add the collapse class.
$(document).on('show.bs.collapse', function () {
$('.in').addClass('collapse').removeClass('in');
})
Okay, so if we never want the in class there...
$(document).on('shown.bs.collapse', function () {
$('.in').removeClass('in');
})
or possibly on the 'show event:
$(document).on('show.bs.collapse', function () {
$('.in').removeClass('in');
})
(I'm not sure which one since I don't know when it adds the class in)
See the docs for the collapse events here