Need some advice regarding a media query and CSS - html

I'm hoping someone is able to help with an issue I'm currently having with a website I am designing. The media query for mobile is where I'm getting hung up.
This is an image of it.
The content isn't centered. I can fix the text simply with a text-align property, and I assume that I can just make the image display as a block and use margin: 0 auto to center it, the problem is that the container itself is not centered. I'm using Bootstrap, and it's all in a Bootstrap container.
I think part of the issue is that on small screens, I am hiding some content that is to the right of the content I can't get centered using Bootstrap's "hidden-xs" and "hidden-sm" properties.
Here is the code for the relevant section in the screenshot, plus my CSS for the media query. If anyone could point me in the right direction, I'd appreciate it.
/* Content Styles*/
.gas-content {
margin: 4.50em 0 4.50em 5%;
}
.left-content {
margin: 2.50em 0 2.50em 5%;
}
.content-container {
width: 75%;
float: left;
}
.test-container {
width: 25%;
float: left;
margin-top: -10px;
}
.move-up {
margin-top: -2em;
}
.move-down {
margin-top: 2em;
}
.img-center {
display: block;
margin: 0 auto;
}
.content-heading {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 1.50em;
}
.services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.emergency-services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.contact-box {
background-color: rgb(3, 17, 85);
padding: 2em 0 6.50em 0;
}
.contact-box h3 {
color: white;
text-transform: uppercase;
margin-left: 15px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.contact-info {
color: white;
margin-left: 15px;
}
.eztouselogo {
margin-left: 15px;
margin-bottom: 15px;
}
.services-left {
margin-right: 0.50em;
}
.content-paragraph {
font-family: 'Open Sans', sans-serif;
margin-bottom: 5em;
line-height: 2.25em;
}
#media (max-width: 991px) {
.test-container {
display: none;
}
.content-container {
display: block;
margin: 0 auto;
padding: 0 0 0 0;
float: none;
clear: both;
}
.container {
display: block;
margin: 0 auto;
float: none;
clear: both;
}
.pipes-img {
width: 75%;
height: 75%;
display: block;
margin: 0 auto;
float: none;
}
}
<!--Begin Main Content -->
<div class="container"> <!--New Container -->
<div class="content-container"> <!--Content on Left Side of Testimonials -->
<div class="row gas-content"> <!--Gas, Water, & Sewer Line Row -->
<div class="col-md-4">
<img class="pull-left img-responsive pipes-img" src="img/pipes.jpg">
</div>
<div class="col-xs-8 move-up">
<h3 class="content-heading">Gas, Water, & Sewer Line Inspection and Replacement in the Pittsburgh Area</h3>
<p class="content-paragraph">Vivamus id ante molestie, vehicula justo nec, facilisis justo. Sed efficitur feugiat accumsan. Nunc vitae fermentum nulla. Aliquam imperdiet nunc felis, et malesuada ligula molestie eget. Proin sodales dictum semper. Proin nec sodales quam. Maecenas ac erat non mauris laoreet volutpat. Proin egestas enim ut magna sagittis vulputate. Aenean non odio lacus. Nam vehicula metus viverra quam laoreet, nec interdum orci porttitor. Etiam gravida velit sit amet commodo suscipit. Cras est erat, scelerisque quis velit non, luctus molestie ex.</p>
<div class="row">
<div class="col-xs-5">
<ul class="services services-left">
<li>Sewer Lines</li>
<li>Gas Lines</li>
<li>Water Lines</li>
</ul>
</div>
<div class="col-xs-7">
<ul class="services services-right">
<li>Sewer Inspections</li>
<li>Water Heaters</li>
<li>Full-Service Plumbing</li>
</ul>
</div>
</div>
</div>
</div> <!--End Gas, Water, & Sewer Line Row -->

Change col-xs-8 to col-md-8 to match the same breakpoint as that on the image. Otherwise, the div wrapping the image will be 100%, but the sibling div will remain 2/3s width.

I don't think we (web developer) need to customize the media query of Bootstrap Framework. Bootstrap has built-in or default media query that fits to all devices such as :
Extra small devices Phones (<768px)
Class prefix : .col-xs-
Small devices Tablets (≥768px)
Class prefix : .col-sm-
Medium devices Desktops (≥992px)
Class prefix : .col-md-
Large devices Desktops (≥1200px)
Class prefix : .col-lg-
We just need to use it "cleverly" as it is.

Related

Centering aside bar with media query

I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'

CSS Tabs>Div hidden behind Container Div

I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view. I can't work out whether it is the content or container div causing this issue.
If you change the ".tabs > div" position from absolute to relative then div class="tabbed" appears as I would like but it causes the content of the tabs stack on top of one another.
Is this a position/z-index or overflow issue?
Any help would be appreciated.
Here is the code:
* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}
/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}
/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
#media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i> Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>
</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view.
You have mistake in your HTML markup. Change this:
Download</button</a>
To this:
Download</button></a>
And add this to your CSS:
.container {
min-height: 350px;
}
If you don't want to set min-height manually, then you'll need to use JS to calculate it dynamically. Hardly imagine doing this with pure CSS.

Responsive css is not responding

The Responsive.css is not completed yet but it is responding according to the device size. The issues that are arising are that when I resize the the screen, the right section with header Memorial, an image below, and some text are not stacking correctly when the screen shrinks in size. Instead, it will be pushed down but remain on the right handside of the screen. Also have in issue with resizing the images I have displayed on my sites. I would like to resize accordingly with the size of the device. I have a logo image and a banner image and on top of these two images is the navigation bar which I am also having issue with resizing and making it transparent due to having the navigation bar on top of a grey background. How can I make it transparent on top of the banner and logo.
<img id="banner" src="img/banner.jpg"/>
<!--The main content of the website will go inside of the #wrapper id. It is divided into two sections: #primary & #secondary.-->
<div id="wrapper">
<!-- Two sections have been created for desktop view to have two columns. Mobile website will just be stacked-->
<div id="content">
<section id="primary"><!--Left column content goes here-->
<h2>Who We Are</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p>
<p>This is how a link looks.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut. Curabitur vitae aliquet nisi. Etiam condimentum tincidunt venenatis. Fusce vel congue purus. Pellentesque ut eleifend ex. Nunc purus neque, aliquam vitae aliquam quis, accumsan id lacus. Nunc ac scelerisque magna. Etiam purus lorem, rutrum et ornare a, tincidunt non ipsum. Nullam blandit dui venenatis, malesuada felis a, porttitor purus.</p>
</section>
<section id="secondary"><!--Right column content goes here-->
<h2>Memorial</h2>
<img src="img/memorial_list.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in elementum velit, venenatis rhoncus lacus. Ut consequat luctus enim, in auctor libero posuere ut.</p>
</section>
</div>
</div>
<!--Footer still needs to be completed-->
<footer>
<div id="footer-right">
<ul><h3>ABOUT</h3>
<li>Contact Us</li>
<li>FAQ's</li>
<li>Site Map</li>
</ul>
<ul><h3>SUPPORT OUR CAUSE</h3>
<li>Donate</li>
<li>Volunteer</li>
<li>Fundraising Events</li>
</ul>
<ul><h3>FOLLOW US</h3>
<li>
<img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon">
<img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon">
<img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/>
<img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2014 International Child Advocacy Network</p>
</div>
</footer>
Responsive CSS:
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones (portrait and landscape) ----------- */
#media screen and (min-device-width : 240px) and (max-device-width: 660px){
/* Styles */
#content{
float:left;
padding:0;
}
#body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
width: auto;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
#nav ul, nav a:visited{
position:relative;
display:none;
}
#nav a:hover {
display:block;
}
#nav li{
text-align:center;
width:100%;
}
#banner{
position:relative;
}
#footer{
font-family: 'Fabrica';
}
}
/* Desktops and laptops ----------- */
#media screen and (min-device-width: 1024px){
/* Styles */
#primary {
width: 50%;
float: left;
padding:10px;
}
#secondary {
width: 40%;
float: right;
padding:10px;
}
}
#font-face {
font-family: 'Fabrica';
font-style: normal;
font-weight: 100;
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf');
}
Main CSS:
/***********************
GENERAL
***********************/
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
body {
/*font-family: 'Fabrica', 'Courier New';*/
font-family: 'Open Sans', sans-serif;
background-color:#e6e9ed;
color: #434a54;
}
#wrapper{
max-width:960px;
margin: 0 auto;
background-color: #f5f7fa;
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating content*/
line-height: 1.8em;
}
#wrapper img {
border-radius:5px 20px 5px;
}
#wrapper p {
text-indent: 2.5em;
}
#banner {
margin-left: auto;
margin-right:auto;
padding: 0;
display:block;
clear:both;
}
#content {
padding:20px 40px;
padding-bottom:50px;
}
h1, h2, h3 {
font-family: 'Droid Serif', serif;
}
/***********************
HEADER - Top image strip above banner
***********************/
#logo {
text-align:right;
max-height:100%;
max-width:100%;
padding: 10px 0px 10px 30px;
}
#header {
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: top;
margin: 0 auto;
max-width:960px;
}
/*Commented out for testing new header technique
#header {
margin-left: auto;
margin-right: auto;
padding: 0;
display: block;
clear: both;
font-family: 'Fabrica', Arial;
}
*******/
/***********************
NAVIGATION - Main site navigation
***********************/
nav{
background-color:#4888dc;
text-align:center;
color:blue;
max-width:960px;
margin: 0 auto;
text-align:center;
font-size:1.2em;
}
nav ul{
list-style:none;
margin:0 10px; /*Can be change later on in the design if it doesn't work*/
}
nav li{
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block
pushes other items out of the page. Inline block maintains width and
height but is in line with other images*/
display:inline-block;
list-style:none;
padding: .4em 1.5em;
}
nav a {
font-weight: 800;
}
nav a:visited, nav a:link {
color:#f5f7fa;
text-decoration: none;
}
nav a:hover {
color:#0B108C;
text-decoration: none;
}
/**********************
FOOTER
**********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
}
footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}
/**********************
RIGHT SIDE OF FOOTER
**********************/
#footer-right {
float:right;
margin-right:15px;
}
.social-icon {
display:inline-block;
width:24px;
height:24px;
margin-bottom:22.7px; /*controls height of "follow us" in footer*/
padding:1px;
border-radius: 20%;
}
/**********************
LEFT SIDE OF FOOTER
**********************/
#footer-left {
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}
#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}
#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px;
display:inline-block;
font-family: 'Open Sans', sans-serif;
}
I use this media query for my responsive design that I use on marketing platform to blast out to users:
#media screen and (max-width: 000px), screen and (max-device-width: 000px)
this works on android, iphone4,5,6 and ipad +other tablets
Use min-width and max-width instead of min-device-width and max-device-width. Device width refers to the display's resolution, i.e. 1024x800, not the size of the window.

Override background image for container using simple grid

I am using Simple Grid and looking to expand the width of my background image of a grid container to the full width of the browser. I have tried multiple techniques to expand the image, but nothing has been working. Should I wrap the container in another div and use that div as a background, or is there a simple css fix to my issue?
HTML: (Div id is "body-wrapper-grid")
TEST
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Navigation Grid -->
<div class="grid" id="nav-wrapper-grid">
<!-- Start Columns -->
<div class="col-1-1">
<!-- Start Navigation Wrapper -->
<nav id="nav-wrapper">
<div id="links">
<img src="images/TEST.png" />
<ul id="nav">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</div>
</nav>
<!-- End Navigation Wrapper -->
</div>
<!-- End Columns -->
</div>
<!-- End Navigation Grid -->
<!-- Start Mission Statement Grid -->
<div class="grid grid-pad" id="body-wrapper-grid">
<div class="col-7-12" id="iphone-mockup">
<img src="images/iphoneMockup.png" />
</div>
<div class="col-5-12" id="mission-statement">
<div id="main-logo">
<img src="images/image.png"/>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p>
<div id="app-store-badge">
<img src="images/appStoreBadge.png" />
</div>
</div>
</div>
<!-- End Mission Statement Grid -->
CSS:
html, body {
margin: 0;
padding: 0;
background-color: #cecece;
overflow-x: hidden;
font-family: 'HouschkaAlt', Fallback, sans-serif;
}
#font-face {
font-family: 'HouschkaAlt';
src: url('fonts/FontName.eot');
src: url('fonts/FontName.eot?iefix') format('eot'),
url('fonts/FontName.woff') format('woff'),
url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
font-weight: normal;
font-style: normal; }
#nav-logo img {
width: 150px;
height: 40px;
}
.grid {
background-color: #fff;
}
/* NAVIGATION LINKS */
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size: 15px;
line-height: 40px;
text-decoration: none;
margin-top: 5px;
padding-left: 20px;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#links {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
}
#nav-logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
#body-wrapper-grid {
background: url('images/downtown.jpg') 0 0 repeat-x;
width: 9999px;
padding-bottom: 0px;
margin-bottom: 0px;
overflow: hidden;
}
#iphone-mockup img {
vertical-align: bottom;
margin: 0 auto;
padding-bottom: 0px;
}
#mission-statement {
text-align: center;
background-color: #fff;
margin: 0px;
padding: 10px;
float: right;
}
#main-logo img {
display: block;
margin: auto;
}
/* APP STORE BADGE */
#app-store-badge img {
width: 200px;
height: 50px;
padding-bottom: 10px;
}
}
#features-detail-grid h3, p {
text-align: center;
color: #3d6430;
font-weight: bold;
}
/* Navigtion for Small Devices */
#media screen and (max-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
color: #3d6430;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
See if this helps you: http://jsfiddle.net/panchroma/DK9rJ/
I've commented out some of your images so it's easier to see what's happening. The important bit is that I've added a wrapper around the area where you want the full size image background and that this wrapper is outside the div of class grid.
<div class="body-background">
<div class="grid grid-pad" id="body-wrapper-grid">
....
</div> <!-- close class="grid grid-pad" id="body-wrapper-grid" -->
</div> <!-- close body-background -->
Since the <div class="body-background"> is outside the <div class="grid ..> it will extend full width and you will be good to go.
Good luck!

Floating / wrapping around an absolutely positioned element?

I have a content box (#left-home-content), with a series of paragraphs, and at the end, a link in a <span> (.read-more-link), and then a <div> (#left-home-spread) that I want positioned absolutely from the bottom of the box. That's easy enough. The trick is that I want the have the paragraphs wrap around this <div>. Code is below, CSS first:
/* #group Left upper home content */
#left-home-content-container {
background-image: url(/dev/images/bg-primary-content.png);
height: 273px;
padding-top: 30px;
margin-top: -15px;
margin-left: 31px;
position: relative;
float: left;
}
#left-home-content {
width: 590px;
height: 240px;
}
#left-home-content h3 {
font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
color: #e2876a;
margin-bottom: 6px;
font-size-adjust: 0.47;
}
#left-home-content p {
line-height: 1.6;
margin-bottom: .6em;
}
.read-more-link {
display: block;
font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
font-size-adjust: 0.47;
font-weight: normal;
font-style: normal;
margin-top: 12px;
}
#left-home-content .read-more-link {
margin-top: 12px;
}
#left-home-spread {
position: absolute;
bottom: 34px;
right: 34px;
}
/* #group Spread the word */
.spread-the-word {
background: url(/dev/images/bg-spread.png) no-repeat;
width: 260px;
height: 31px;
padding-top: 17px;
padding-left: 15px;
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3-4 */
border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
box-shadow: 0 0 5px rgba(86,86,86,0.25);
-moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
-webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}
.spread-the-word ul {
float: left;
margin: -7px 0 0 8px;
width: 115px;
}
.spread-the-word li {
float: left;
list-style: none;
width: 28px;
height: 28px;
margin: 0 12px 0 0;
}
.spread-the-word .last-item {
margin-right: 0;
}
#left-home-content .spread-the-word h3 {
color: white;
font-size: 16px;
float: left;
font-size-adjust: 0.47;
width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
text-shadow: #627C39 0 0 10px;
text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}
#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
overflow: hidden;
display: block;
background-position: 0 0;
height: 28px;
width: 28px;
line-height: 28px!important;
}
#left-home-content .at300bs:hover {
opacity: 1;
box-shadow: 0 0 15px #fff;
-moz-box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
}
#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }
#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }
/* #end */
/* #end */
And the HTML to go with it.
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3>Now Let’s Make a Difference</h3>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<span class="read-more-link">Read More</span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
And here's a screenshot, to illustrate what I'd like my final result to be like (the .read-more-link will take it's position from the text above, it doesn't have to be aligned to #left-home-spread).
Any ideas? position:absolute; and float don't mix, position:relative; just has the "Spread" <div> (aka #left-home-spread) positioning itself relative to the text content above it. Placing #left-home-spread above the content (like it is now), setting it float:right; and then giving it a large margin-top results in a gaping hole on the right side, as the margin counts as part of the floated #left-home-spread.
Ideas, anyone?
Looking at the picture and not reading anything, I suggest putting the spread the word element after all your paragraphs and then floating it right and using a negative top margin. No absolute/fixed positioning.
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3>Now Let’s Make a Difference</h3>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<span class="read-more-link">Read More</span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
And CSS..
.spread-the-word { float:right; margin-top:-200px; width:200px; }
The top margin can be the height of the entire box. In my mind that works out right. You may or may not need to wrap all the paragraphs and h3 inside another container for it to work properly. But the box has to come afterwards.