The responsive drop down menu work well here:
https://klia2.co/include/header.htm
but when insert to content page as below, the drop down menu not drop down when view in media screen.
https://klia2.co/index2.htm
compared the 2 links to understand the actual scenario.
Notice that the alignment of logo header and menu in content page also not tally.
Kindly assist to rectify the issue and all suggestion are most welcome and appreciated.
HTML PAGE - index2.htm
<body>
<div id="header"></div>
<div class="content">
<br>
<br>
** content **
<br>
<br>
<div id="footer"></div>
</div>
</body>
HTML PAGE - header.htm
<body>
<div class="content">
<header id="logo"></header>
<div class="navbar" id="nav">
Home
Facilities
Airlines Offices
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<i class="fa fa-bars"></i>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}
</script>
</body>
CSS CODE - style1.css
/* CSS Reset */
body {font-family:Arial;
}
.content {
max-width: 1040px;
margin: auto;
}
/*--------------------------logo---------------------------------*/
#logo {
background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
width: 1040px;
height: 150px;
border: 0;
margin-bottom: 0;
}
#media only screen and (max-width: 600px) {
#logo {
width: 100%;
}
}
/*--------------------------menu---------------------------------*/
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height:18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
#media screen and (max-width: 600px) {
.navbar a, .navbar .search-box, .navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
#media screen and (max-width: 600px) {
.navbar.responsive {position:relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon{
display: flex;
}
}
/*--------------------------body------------------------*/
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column-reverse;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}*/
Footer is the issue. Remove css, which breaks navbar styles. Also meta tags should be in the header. Screenshot https://prnt.sc/1t7vjgu
Related
I want to do my masterpage for my php group assignment project shape like this:
masterpage image 1
However, it turns badly and out of place like this:
masterpage image 2
How do I ensure that the content area and header in right place and doesnt overlap each other.
here is my code for the masterpage:
CSS
<style>
/* The sidebar menu */
.sidebar {
height: 100%;
width: 250px;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #262626;
/* Dark */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
color: #cccccc;
/* text colour */
text-align: justify;
position: absolute;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #cccccc;
/*#818181 */
display: block;
}
.main {
margin-left: 160px;
/* Same as the width of the sidebar */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.header-banner {
position: absolute;
right: 0px;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="sidebar">
<img class="img" src="/image/logo.png" alt="symbol" style="width:200px;height:125px;" />
</div>
<div class="header-banner">
<img class="banner" src="/image/banner.png" alt="header" style="width=1500px; height:150px;" />
</div>
<!-- Page content -->
</body>
</html>
Try css grid. Here is the code. lemme know if it works.
Markup :
<div class="wrapper">
<div class="mini-wrapper sidebar">
Sidebar
</div>
<div class="mini-wrapper header-top">
Header-top
</div>
<div class="mini-wrapper content-area">
Content Area
</div>
</div>
CSS
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 200px 600px;
background-color: #fff;
color: #444;
}
.mini-wrapper {
border:3px solid dodgerblue;
padding: 20px;
font-size: 150%;
}
.sidebar {
grid-column: 1;
grid-row: span 50;
}
.content-area{
grid-column: 2 ;
grid-row: span 49;
}
.header-top {
grid-column: 2;
grid-row:1;
}
https://codepen.io/anon/pen/MPvLqE
I have been working on a responsive web design, after adding CSS to make a link stay centered on a an image the webpage now displays any new html behind the image. I want to be able to add more things on my webpage but any new html I write disappears.
Link to JSFIDDLEhttps://jsfiddle.net/R4bbit2k17/7yuL4y1p/1/#&togetherjs=MEzytpw3kf`
Because your .banner-inner is using position: absolute in conjunction with taking up 100% of the width and height, you'll need to set a position other than static for your text element(s), along with giving them a z-index greater than the default of 0:
p {
background: red; /* Purely to highlight the text */
position: relative;
z-index: 1;
}
This causes your text to appear on top of your image, and can be seen in the following:
body {
font-family: helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header {
background: black;
color: white;
padding-top: 20px;
min-height: 45px;
}
header a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
float: right;
margin-top: 5px;
}
#media only screen and (max-width:1000px) {
.centered {
font-size: 12pt!important;
}
}
#media only screen and (max-width:800px) {
.centered {
font-size: 11pt!important;
}
}
#media only screen and (max-width:600px) {
.centered {
font-size: 10pt!important;
}
}
#media only screen and (max-width:400px) {
.centered {
font-size: 9pt!important;
}
}
#media only screen and (max-width:200px) {
.centered {
font-size: 8pt!important;
}
}
.banner-inner {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
color: white;
}
.centered {
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
margin-top: 20%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 12pt;
}
.img {
width: 100%;
height: auto;
float: left;
}
p {
background: red;
position: relative;
z-index: 1;
}
<body>
<header>
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Courses</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="banner-inner">
<img class="img" alt="" src="https://d2mt0dng9y3p4j.cloudfront.net/newandimproved/wp-content/uploads/2016/12/shop-with-a-sheriff-mockup.jpg">
<div class="centered">Start Learning</div>
</div>
</section>
<p>ANY HTML ADDED APPEARS BEHIND THE IMAGE AND I CANNOT FIGURE OUT HOW TO CHANGE IT TO APPEAR BENEATH THE IMAGE AS IT WOULD WITH A FRESH HTML PAGE</p>
</body>
Hope this helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want it to have a header at the top which spans the width of the page, a main content part which has side bars either side and then a footer underneath. Unfortunately I am not very good when it comes to fixed, relative absolute and the measurements etc. so it is really appreciative.
I did use some of the code from here: How to make a page with header and left-sidebar?
But I edited it so the measurements were done in em not px as it makes it more scalable on devices.
Here is my current HTML layout
#import url('https://fonts.googleapis.com/css?family=Roboto');<!-- Custom Font -->
#charset "utf-8" #font-face {
font-family: 'Roboto', sans-serif;
}
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*main colour settings for page*/
body {
color: black;
font-family: 'Roboto';
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*Links*/
a,
a:link,
a:visited {
color: black;
text-decoration: none;
transition: 1s;
}
/*Link hovering*/
nav a:hover {
text-decoration: none;
border: solid 1px black;
border-radius: 5px;
padding: 10px;
}
/*Main heading*/
h1 {
font-size: 3em;
max-width: 100%;
max-height: 100%;
text-align: center;
position: absolute;
left: 2em;
right: 0;
top: 0;
height: 2em;
}
/*Secondary heading*/
h2 {
font-size: 2em;
max-width: 100%;
max-height: 100%;
}
/*Text*/
p {
font-size: 0.75em;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
text-align: center;
display: block;
}
#logo {
float: left;
margin-left: 10px;
margin-top: 5px;
max-height: 100px;
max-width: 100px;
}
canvas {
border: solid 1px black;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
text-align: center;
}
button {
margin-bottom: 1em;
}
/*Main Body*/
#mainContent {
position: absolute;
left: 10em;
top: 8em;
right: 0;
bottom: 1em;
text-align: center;
}
#sideBar {
position: absolute;
left: 0;
top: 8em;
right: 0;
bottom: 0;
width: 10em;
text-align: center;
padding: 2em;
border-right: solid 1px black;
max-height: 2000px;
}
#sideBar img {
max-width: 100px;
max-height: 100px;
margin-bottom: 2em;
}
/*Light Switches*/
#lightSwitchOff {
display: inline;
margin-top: 10px;
}
#lightSwitchOn {
display: inline;
margin-top: 10px;
}
/*Layout for desktop with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
p,
li {
font-size: 1.5em;
}
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
li {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 50%;
max-height: 50%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
p {
font-size: 1.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 200px e.g. iMac*/
#media only screen and (min-width: 2000px) {
p {
font-size: 2em;
}
}
<header>
<h1>Sliding Game</h1>
</header>
<!--Closes Header -->
<div id="leftSideBar">
<!-- Left Side Bar -->
<h2>Select Image:</h2>
<img src="images/dog.jpg" alt="Image Unvailable"></img>
<img src="images/italy.jpg" alt="Image Unvailable"></img>
<h2>Select Difficulty:</h2>
<p id="easy">Easy</p>
<p id="medium">Medium</p>
<p id="hard">Hard</p>
<button>Reset</button><br>
<button>Randomise</button>
<p>Timer:</p>
<div id="timer">0</div><br>
</div>
<!-- Closes Left Side Bar -->
<div id="mainContent">
<!-- Main Body -->
<canvas id="game" width="600px" height="600px">Cavas is not available on your browser</canvas><br>
<button id="start">Start</button>
<div style="display: none">
<img id="source" src="images/italy.jpg" alt="Image Unvailable">
</div>
</div>
<!-- Closes Main Content-->
<div id="rightSideBar">
<!-- Right Side Bar -->
<h2>Leaderboard</h2>
</div>
<!-- Closes Right Side Bar -->
<footer>
Website Created by Ryan Simms <br> 16024828#stu.mmu.ac.uk <br>
</footer>
<!-- Closes Footer -->
As for centering of elements on the webpage I would like you to recommend reading the following guide: Centering in CSS: Complete guide, and you can also use Flexbox for somewhat same result: Complete guide to Flexbox.
As for the header, I've made some code for you. You should checkout Bootstrap for easy positioning of elements on the webpage. They have specific classes for Navbars fixed bottom and top. Pretty easy framework!
.header {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: relative;
background: #353535;
width: 100%;
height: 50px;
margin: auto;
}
.text {
display: flex;
margin: auto;
color: orange;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
height: 300px;
}
.div1 {
display: flex;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div2 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div3 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
<div class="header">
<h3 class="text">Your text here</h3>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div class="container">
I tried to use a couple of posts that were here for resizing for mobile devices but i can't seem to get it working. The margins keep pushing all the elements together when you view the site on a mobile device
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
`enter code here`margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
You are seeing this page on mobile devices like this
You need to change like this
then increase the nav bar width
(I tried width: 1520px; for Nav beacuse that is the background image size you were used)
There are a bunch of problems with your code. But the problem with the menu is because li is not taking the height of a. So the list items will stack one under another, and will li under li. Li being smaller than a.
Use display:block on a.
Also, I copied the code from your site, so it will be here if someone else comes looking for this answer. Tried to clean it up a bit but you have some styles that i don't understand, like .introPar1 { margin-left:400px;margin-right:400px}
Anyway, see code below
body img {
max-width: 100%;
height: auto;
}
/* TOP NAVIGATION */
nav ul li a {
text-decoration: none;
margin: 20px;
padding: 20px;
border-style: solid;
border-color: grey;
display: block;
}
nav ul li {
float: left;
}
nav ul {
list-style-type: none;
float: left;
}
nav {
background-color: #f2f2f2;
padding: 10px;
float: left;
width: 100%;
box-sizing: border-box;
}
/* NAV HOVER */
nav a:hover {
background-color: blue;
border-color: orange;
border-style: solid;
color: white;
transition: .3s;
}
/* BANNER */
.banner {
text-align: center;
}
.banner img {
border-style: solid;
border-width: 10px;
border-color: #87CEEB;
}
/* BODY ELEMENTS */
.home {
font-weight: bold;
font-size: 20px;
}
.temp {
text-align: center;
margin: auto;
padding: 20px;
}
/* BACKGROUND */
.bgimage img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
position: fixed;
}
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
nav ul li a {
margin: 5px;
padding: 10px;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
nav ul li {
width: 100%;
}
}
<div class="bgimage">
<img src="http://via.placeholder.com/1200x1000">
</div>
<nav>
<ul>
<li class="home">Crafts LLC</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>
<div class="Intro">
<article class="introPar1">
<h1><b><u>CRAFTS LLC</u></b></h1>
<br> Here at CRAFTS LLC, we offer you our 45 years of expertise of
<br> home repair advisory and remodeling services
<br>
<br> We are also here to help you with your estimation service needs
<br> and contractor referral services
<br>
<br> With CRAFTS LLC, you get both service and quality excellence.
<br> You need to look no further for your home repair and remodeling needs/solutions
<br>
</article>
</div>
<div class="contacts">
<p>Email to: craftsllc1#gmail.com or Call:813 347 7458</p>
</div>
My website uses a Foundation Front-end framework for my website, so it's a responsive design for mobile devices.
I have an issue, with how the data is displayed on my website when used on a mobile.
I would like the sidebar widget contents on my website to display above the items (health clubs) on the mobile version of the website. See my sidebar widget has a filter section, So I really need that displayed before the (health clubs).
Question: What do I need to change to display the sidebar widget on top? Apologises I'm ok at CSS but this is pretty advanced for my skill level.
Here is the website: (PC version)
http://s10.postimg.org/cl1n43w95/website.png
Here is how the website is displayed on the mobile. Note How my items are all above the sidebar. I'd like the sidebar widget above the items:
http://s27.postimg.org/8adw402gz/screenshot2_sidebarunder_items.png
Here is the foundation code I believe I need to change:
/* #Foundation Style
================================================== */
.row .column, .row .columns{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container{ margin: 0px auto; max-width: 960px; padding: 0px 20px; }
.container.wrapper{ margin: 0px auto; max-width: 1000px; padding: 0px; }
.row { width: 1140px; max-width: 100%; min-width: 727px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -10px; }
.column, .columns { float: left; min-height: 1px; padding: 0 10px; position: relative; margin-bottom: -12px; }
.row .one { width: 8.333%; }
.row .two { width: 16.667%; }
.row .three { width: 25%; }
.row .four { width: 33.333%; }
.row .five { width: 41.667%; }
.row .six { width: 50%; }
.row .seven { width: 58.333%; }
.row .eight { width: 66.667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.333%; }
.row .eleven { width: 91.667%; }
.row .twelve { width: 100%; }
.row .one-fifth{ width: 20%; }
.row .one-sixth{ width: 16.667; }
img{ max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
object, embed { max-width: 100%; }
/* #Foundation Mobile Size
================================================== */
#media only screen and (max-width: 767px) {
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;
width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.container{ margin: 0px auto; max-width: 420px; }
.container.wrapper{ margin: 0px auto; max-width: 460px; padding: 0px; }
.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
.row .column, .row .columns { width: 100%; float: none; }
.column:last-child, .columns:last-child { float: none; }
[class*="column"] + [class*="column"]:last-child { float: none; }
.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
.column:after, .columns:after { clear: both; }
}
/* #Custom Style
================================================== */
/*--- header area ---*/
.header-wrapper .responsive-menu-wrapper{ display: none; }
/* #Custom Mobile size
================================================== */
#media only screen and (max-width: 767px) {
/*--- header area ---*/
.header-wrapper .logo-wrapper{ float: none; }
.header-wrapper .navigation-wrapper{ display: none; }
.header-wrapper .responsive-menu-wrapper{ display: block; }
.header-wrapper .top-search-form{ display: none; }
div.logo-right-text{ float: none !important; text-align: center !important;
padding-top: 0px !important; padding-bottom: 20px; }
div.feedback-wrapper{ display: none; }
div.top-navigation-left, div.top-navigation-right{ text-align: center; float: none; }
div.social-wrapper { float: none; display: inline-block; margin-top: 5px; }
/*--- single page ---*/
div.single-portfolio .port-media-wrapper { max-width: 100%; width: 100%; float: none; margin-bottom: 20px; }
div.single-portfolio .port-content-wrapper { overflow: visible; }
div.single-portfolio .port-nav .port-prev-nav, div.single-portfolio .port-nav .port-next- nav { margin-bottom: 15px; }
/*--- page item ---*/
div.gdl-blog-medium .blog-media-wrapper { margin-right: 0px; width: 100%; }
div.gdl-blog-medium .blog-context-wrapper { overflow: visible; }
div.price-item{ margin-bottom: 20px; }
div.column-service-row{ border-left-width: 0px; }
/*--- shortcode ---*/
.shortcode1-4, .shortcode1-4.last,
.shortcode1-3, .shortcode1-3.last,
.shortcode1-2, .shortcode1-2.last,
.shortcode2-3, .shortcode2-3.last,
.shortcode3-4, .shortcode3-4.last,
.shortcode1-5, .shortcode1-5.last,
.shortcode2-5, .shortcode2-5.last,
.shortcode3-5, .shortcode3-5.last,
.shortcode4-5, .shortcode4-5.last{ width: 100%; }
/*--- slider ---*/
.flex-caption{ display: none !important; }
.nivo-caption{ display: none !important; }
.anythingSlider{ display: none !important; }
/*--- footer ---*/
div.copyright-left, div.copyright-right{ float: none; text-align: center; }
}
Thanks Guys, Sorry if i'm not very clear.
With the foundation grid you can change the order of columns, which is probably what you are looking for.
http://foundation.zurb.com/docs/components/grid.html
Look for "Source Ordering"
That should guide you on the right path. Otherwise it would be helpful if you post the relevant markup.
second attempt
If you look at the source of your second page http://goo.gl/ijZ1JF you find three elements:
<div class="row single page"> ...
<div class="eight column columnopaddingright"> ...
<div class="four column columnopaddingleft"> ...
Do you get the desired result if you modify them for testing purpose like this?
<div class="row single page" style="display: table;">
<div class="eight column columnopaddingright" style="display: table-footer-group;">
<div class="four column columnopaddingleft" style="display: table-header-group;">