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;">
Related
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
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">
can somebody please point me to a solution for this?
HTML
<div class="container">
<input type="text" class="left" />
<button class="right">Some button</button>
</div>
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right { width: 100px; }
Here is code pen sample: http://codepen.io/be-codified/pen/qdRRBY
Input field should be stretchable, button should be fixed positioned on right.
Thank you in advance.
// edit
I can not use table tag because layout needs to be responsive.
I gave the input a width of calc(100% - 110px) and the button a float:right which resulted in the following. Is that what you need? The input type you want to use is, as far as I know, not stretchable by the user.
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
float: right;
}
input.left {
width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}
I suggest you to put the form elements into <div>, so don't change their default display properties, and then set the left input box to 100% width as needed.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
In fact, both left and right can have dynamic width, so right column always get the minimum width based on the button length.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
white-space: nowrap;
}
.left {
width: 100%;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
Here is full responsive solution.
HTML
<div class="container">
<div class="input-flied-box">
<form>
<input type="text" required="required" placeholder="Right Some thing" />
<button type="submit" class="submit-button">Send</button>
</form>
</div>
</div>
CSS
/* RESPONSIVE CSS */
.container{
width: 100%;
}
.input-flied-box{
width: 100%;
}
.input-flied-box input{
padding: 6px 12px 6px 12px;
}
.submit-button{
top: inherit;
right: inherit;
position: relative;
margin-bottom: 15px;
}
#media (min-width: 768px){
.container{
width: 750px;
}
.input-flied-box{
width: 600px;
}
.input-flied-box input{
padding: 6px 101px 6px 12px;
}
.submit-button{
top: 14px;
right: 14px;
position: absolute;
margin-bottom: 0;
}
}
#media (min-width: 992px){
.container{
width: 960px;
}
}
#media (min-width: 1200px){
.container{
width: 1170px;
}
}
/* RESPONSIVE CSS END */
*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}
.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}
https://jsfiddle.net/bL3wgrv9/
I don't have a web development background, but have a small business client who has me doing other things who got me working on their web site. I've designed a home page, more or less ready for me to turn it into a template in whatever CMS we decide to use.
It was going great until I started replacing blank divs with images. Now that I'm putting in the proxy images, everything is breaking down.
The primary issue is that the CSS attributes are not resizing the image, but the image at full size would be acceptable if the rest of the body actually flowed in such a way that the image wasn't covering it when rendered.
So far, I've tried adding height and with attributes to the img tag equal to both the actual height of the image and the height I'd like it to be. (310px for the desktop width.)
I've also tried nesting the image inside a div inside the section and applying widths there. I ended up with other problems, I assume from the shortcuts I took in the CSS, but even after changing how I was designating the description, it still was not resizing and the overflow was not being hidden.
Here's a JSFiddle.
The current HTML:
<body>
<header id="page-head" class="clearfix">
<div id="logo">Logo</div>
<h1>Academic Tours and Travel</h1>
<nav>
<ul class="clearfix">
<li><div>Travel With Us</div></li>
<li><div>Sign In</div></li>
</ul>
</nav>
</header>
<section id="feature">
<img src="https://i.imgur.com/CG8cppD.jpg">
<div>
<h1>Malta-Sicily Delight</h1>
<p>Our star tour. Visit Malta and Sicily with our hand crafted tours.</p>
</div>
</section>
<div id="content-wrap" class="clearfix">
<div id="right-wrap" class="clearfix">
<section id="about">
<header><h2>About</h2></header>
<p>Founded in 1984, Academic Tours and Travel is a leading specialist in travel to Malta and Sicily. They also are home to experts in many European destinations including Italy and Romania.</p>
</section>
<section id="pledge">
<header><h2>Our Pledge</h2></header>
<p><em>"From Concept to Completion"</em></p>
<p>Our agents will work with you from the first idea until you pick you unpack. If we ever recieve complaints from a local provider they are investigated and blacklisted for at least a year.</p>
</section>
<a href="">
<div id="call" class="clear">
<h1>Browse our Destinations</h1>
</div>
</a>
</div>
<section id="contact">
<header><h2>Contact an Agent</h2></header>
<form>
<label>Name: <input type="text" name="name" placeholder="Jane Doe" required="true" /></label><br />
<label>Email: <input type="text" name="email" placeholder="address#server.com" required="true" /></label><br />
<label>What's your dream vacation? <textarea name="destination" placeholder="Sample text" required></textarea></label><br />
<button type="submit">Send</button>
<button type="reset">Reset</button>
</form>
</section>
</div>
</body>
Current CSS:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* border: 1px solid black; */
}
html {
height: 100%;
}
a {
text-decoration: none;
}
body {
font-size: 62.5%;
margin: auto;
height: 600px;
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
button {
width: 47%;
margin-right: 5%;
display: inline-block;
}
button:last-child {
margin-right: 0;
}
h1 {
font-size: 2.1em;
text-align: center;
color: #c2d22d;
}
h2 {
font-size: 1.6em;
text-align: center;
color: #c2d22d;
}
header {
background-color: #134313;
}
input {
width: 100%;
}
img {
height: 100px;
}
label {
font-size: 1.2em;
}
nav ul {
min-width: 350px;
position: relative;
}
nav li {
display: inline;
list-style: none;
text-align: center;
padding-top: 12px;
width: 25%;
min-width: 60px;
background-color: #B3DFB3;
position: absolute;
height: 40px;
font-size: 1.3333em;
border-radius: 5px;
}
nav li:hover {
background-color: #A4B4C7;
}
nav li:first-child {
left: 20%;
}
nav li:last-child {
right: 20%;
}
nav li a {
text-decoration: none;
color: #010A01;
}
nav li a div {
height: 100%;
width: 100%;
}
p {
font-size: 1.2em;
}
section p {
padding: 0 10px;
}
textarea {
width: 100%;
}
#page-head {
width: 100%;
height: 120px;
}
#call {
min-height: 60px;
}
#call:hover {
background-color: #A4B4C7;
}
#call h1 {
color: #134313;
padding: 15px;
}
#content-wrap {
background-color:#E0FEE0;
}
#logo {
display: none;
}
#feature {
clear: both;
position: relative;
}
#feature div {
width: 77.5%;
margin: auto;
position: absolute;
left: 11.25%;
bottom: 3.8461%;
}
#media screen and (min-width: 425px) {
#about {
margin-right: 5%;
}
#about, #pledge {
width: 47.5%;
float: left;
}
#call {
font-size: 1.3333em;
}
}
#media screen and min-width: 600px) {
#page-head h1 {
max-width: 100%;
text-align: left;
float: left;
}
#page-head nav {
max-width: 60%;
float: right;
}
}
#media screen and (min-width: 740px) {
body {
max-width: 960px;
}
button {
width: 46%;
}
/* IDs for specific features. */
#contact {
width: 30%;
}
#content-wrap {
width: 100%;
min-height: 250px;
}
#feature {
min-height: 310px;
width: 83.3333%;
margin: auto;
position: relative;
}
#logo {
display: block;
}
#page-head {
height: 60px;
}
#page-head > * {
float: left;
}
#page-head > nav {
float: right;
}
#right-wrap {
width: 65%;
height: 100%;
float: right;
}
}
/* Utility classes. */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clear {
clear: both;
}
Try setting
Img{ width:100%}
And then edit the height of the section #feature to the height you want it to be. The image will fill the the width of the section.
Having trouble with my responsive layout. My twelve columns blocks are not on one row the last two float under it but should be all in one line.
Each row will be having its own column blocks.
You can get full code view of what I mean at my codepen snippet.
http://codepen.io/riwakawebsitedesigns/pen/zbmLE
.container {
display: block;
width: 94%;
max-width: 1280px;
margin: 2% auto 0 auto;
}
.row {
display: block;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
background: #e5e5e5;
min-height: 40px;
text-align: center;
float: left;
margin-right: 20px;
}
.block-1 {
width: 8.33333333%;
}
.block-2 {
width: 16.66666667%;
}
.block-3 {
width: 25%;
}
.block-4 {
width: 33.33333333%;
}
.block-5 {
width: 41.66666667%;
}
.block-6 {
width: 50%;
}
.block-7 {
width: 58.33333333%;
}
.block-8 {
width: 66.66666667%;
}
.block-9 {
width: 75%;
}
.block-10 {
width: 83.33333333%;
}
.block-11 {
width: 91.66666667%;
}
.block-12 {
width: 100%;
}
.last, .omega, .end{
margin: 0;
}
Remove the margin on the columns:
.column {
background: #e5e5e5;
min-height: 40px;
text-align: center;
float: left;
margin-right: 20px; <!-- remove -->
}
Instead of the reaching 100% width the margin is causing less width for them due to the 20px x 12. So your getting 100% + 240px, this is causing the last 2 to move below.
DEMO HERE
Ruddy is right, you are not considering the gutter between columns. Do his way or...
SIMPLE SOLUTION:
Try to subtract 2% from each block class, worked here.
FANCY SOLUTION:
If you use LESS you can work with variables, so you could do something like this:
/*LESS FILE*/
#gutter: "20px";
.block1 {
width: (8.333% - #gutter);
}
Hope it helps.