So I am trying to center my image inside one of my two columns. In this case is the left column. Take the image below for example.
I got some text in column two, but the image in column one does not look center as the way I envision it. Here is what it is currently looking like right now.
The red circled is where I want my picture to actually be located.
Here is my code
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
When I view this in full screen in desktop mode, it is just not how I want it. But when I resize my browser to tablet/smartphone mode, I'm cool with that. My goal here is to center the image in column one no matter how you resize it under it reaches the pixels max-width.
As by default <img> tag in HTML5 is an inline-block element, you can center it by applying the text-align: center; to it. This may seem unintuitive as it says center text to center, but it actually applies to all content that is of type inline-block.
Find below the updated snippet with a new class .centered that has been added to the first column, so that only the its contents get centered.
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
.centered {
text-align: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column centered">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
A good tip for the future is to keep you HTML separate from your CSS styling – try to have as few (if not none) inline styling and <style> tags in your HTML, and reference your stylesheets with <link> tags. Learn more about this from this W3Schools tutorial.
Here is what my plan was (in sketch). From desktop to mobile.
I was able to ask the right question in another forum and I got this answer.
HTML
<div class="parent">
<div class="image">
<img src="https://i.redd.it/q2iv8opn50kz.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="text">
<h2>This is an h2 tag</h2>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
from the 1914 translation by H. Rackham.
</p>
</div>
</div>
CSS
.parent {
display: flex; /* Where the mobile part begins */
justify-content: center;
text-align: center;
flex-wrap: wrap;
padding: 50px 0 0 30px;
}
.parent div {
height: 200px;
width: 300px;
}
img {
width: 170px;
height: 170px;
}
Now I have it in two somewhat "columns," it works!
Related
Upon clicking the mobile menu extra space appears on the right of the page causing a horizontal scroll bar to appear.
It appears that width: 100vw; on line 126 is causing the issue but changing this also changes the size of the menu item.
After investigating this issue I found it only appears on windows and not on mac(tested in firefox and chrome).
Codepen
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 600px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
/* width: 100vw; */
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100vw;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: flex;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style/style.css" />
<script src="/scripts/navbar.js" defer></script>
<title>test</title>
</head>
<body>
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
</body>
</html>
Why is this happening?
The reason this is happening is because 100vw is the full width of the viewport, but your page has a vertical scrollbar so the available width is actually "viewport width - scrollbar width". (If you delete the content from the page so that there is no vertical scrollbar, the horizontal scroll doesn't appear).
So for example, if the viewport width is 600px and the scrollbar is 24px, then 100vw is 600px, but the actual space for the menu item is just 576px (600px - 24px) resulting in a scroll bar.
How to fix it?
It is rare that 100vw is really necessary in CSS layouts - 100% is usually preferable as it takes 100% of the available space of its container. So we just need to make sure each of your menu options' containers are also set up correctly. In your case, you need to make just a few changes to the CSS in your #media (max-width: 600px) query:
.nav-links {
width: 100%; /* change from 100vw; */
}
.nav-links li {
width: 100%; /* change from 100vw; */
}
.nav-links.active {
display: block; /* change from flex (it isn't needed and just affects the display) */
}
.container-nav {
width: 100%; /* this was 80% for some reason? */
}
Working Example
(Note I've changed the media query to #media (max-width: 800px) below, so we can see the dropdown menu here in the snippet window without resizing the screen)
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 800px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100%;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: block;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?
I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Business Title</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<header>
<img class="mainImage" src="image/logo.png">
</header>
</head>
<body>
<div class="main">
<h1>Simple Business.</h1>
<ul>
<li>I need Option 1.</li>
<li>I just need Option 2.</li>
<li>I just need Option 3.</li>
<li>I need Option 4.</li>
</ul>
<footer>
<h1>About THIS BUSINESS.</h1>
<p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat.
</p>
</footer>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
----------
**CSS:**
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
background-color: #ececec;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
font-family:'Arial Black';
font-size: 4em;
padding-top: 5px;
}
li {
text-decoration: none;
font-size: 2em;
line-height: 2.5em;
color: #FF48D0;
}
ul {
list-style: none;
padding: 0;
}
.mainImage {
width:75%;
max-width:483px;
}
a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}
/******************************************
/* LAYOUT
/*******************************************/
.main {
background-color: #FFF;
margin:1em;
margin-left: 2em;
margin-right: 2em;
float: center;
max-width: 960px;
}
.about, p {
float:center;
max-width: 960px;
padding-left: 1em;
padding-right: 1em;
text-align: justify;
}
header {
padding:10px;
}
footer {
padding: 5px;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* =======================================================================
Media Queries
========================================================================== */
#media only screen and (max-width: 930px) {
.main {
max-width: 95%;
margin: 0 auto;
text-align:center;
padding-bottom: 1.5em;
float: none;
}
h1 {
font-size: 2.5em;
text-align: center;
}
li {
font-size: 2em;
line-height: 2.5em;
}
}
#media only screen and (max-width: 480px) {
.main {
max-width: 95%;
}
h1 {
font-size: 2em;
text-align: center;
}
li {
font-size: 1.4em;
line-height: 2em;
}
}
You just need to add margin: 0 auto; to your css for that element.
Like so:
.main {
margin: 0 auto;
}
This will centre the element automatically to the users browser.
CSS Margins
The classical way to center an element with CSS is to set left and right margin to auto
Your code should be
.main {
background-color: #FFF;
margin: 1em auto;
max-width: 960px;
}
.main {
background-color: #FFF;
max-width: 960px;
display: table;
margin: 0 auto;
}
Fiddle: Demo
I am here just to ask a quick question.. I am trying to use CSS media queries in order to make my current website compatable with mobile devices, however everything I type in seems to not make any kind of difference? I really am new to CSS at the moment.
Here is my HTML
<html>
<head>
<!--<link href="styles.css" rel="stylesheet" type="text/css">-->
</head>
<title>Cochranes Law Firm</title>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png">
<div id="nav">
<div id="Search">
<input type="text" name="Search"> <img
src="images/search.png" class="mag">
</div>
<ul>
<li class="Home">Home </li>
<li class="About">About Us </li>
<li class="Team">Our team </li>
<li class="Services">Our Services </li>
<li class="last"> Contact Us </li>
</ul>
</div>
</div>
<div id="headings">
<h1>
Local <span style="color: eb332c; font-weight: bold">Billingham</span>
Solicitors Firm
</h1>
<img src="images/family.jpg" class="family"> <img
src="images/home.jpg" class="home"> <img src="images/care.jpg"
class="care">
<h2>Family Law</h2>
<h3>Buying & Selling Property</h3>
<h4>Wills, Trusts & Probate</h4>
</div>
<div id="content">
<div id="bottomleft">
<h5>Welcome to Cochranes Law Firm</h5>
<p class="para">We are a family High Street Practice, in
Billingham Town Centre, providing an important service to the local
community. we are wills and probate. buying and Selling, as well as
Family law Solicitors in the Billingham and Stockton-on-tees area.
If you would like any further information please feel free to
contact us by phone, email or our contact form.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit
ante placerat orci, et porttitor nunc velit malesuada tortor. Nam
ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit
amet nulla ornare fringilla sodales vel justo. Cras hendrerit
libero a mauris gravida lobortis. Donec iaculis tincidunt est, non
rutrum lorem dictum vitae. Curabitur non justo sed est accumsan
posuere id eget justo. Nunc in justo congue, laoreet sem sed,
scelerisque nulla. Fusce in urna suscipit, imperdiet purus et,
ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus
placerat aliquet.</p>
</div>
<div id="bottomright">
<h6 class="address">Contact Address</h6>
<p class="pclass">
Cochranes Law Firm <br> 67 Queensway<br> Billingham<br>TS23
2KH
</p>
<h6 class="commonnum">Contact Numbers</h6>
<p class="nums">
Telephone: 01642 266800<br>Fax:01642 366809<br> DX 63160
BILLINGHAM
</p>
<p class="Email">info#cochraneslawfirm.co.uk</p>
<h6 class="contactmail">Contact E-Mail Address</h6>
</div>
</div>
</div>
<div id="footer">
<div id="footer_content">
<p class="foot">
©2014 Cochranes Law Firm | Privacy Policy | Terms and
Conditions<br> Web Design by IT Solutions.
</p>
<img src="images/ware.png"> <img
src="images/accreditations.png" class="accreditations"> <small><br>
<br>Cochranes Law Firm is a Limited Liability registered in
England and Wales number OC343046 and our VAT number is 508 983002.
The registered office is at 67 Queensway, Billingham. TS23 2LU.
Authorised and regulated by the Solicitors Regulation authority
number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct.
We have worldwide professional indemnity insurance through amtrust
Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB.
Our policy number is P13A298125P and P13B295219P. </small>
</div>
</div>
</body>
</html>
This is my CSS
<style>
* {
font: 12px arial;
padding: 0px;
margin: 0px;
}
#wrapper {
margin: 0 auto;
width: 1130px;
}
#header {
position: relative;
height: 100px;
width: 1130px;
}
#header img {
position: absolute;
top: 10px;
}
#nav {
position: absolute;
right: 0px;
}
#nav ul {
padding: 5px;
border-left: 1px;
text-align: center;
width: 600px;
}
#nav li {
float: left;
display: block;
padding: 8px 15px;
border-right: 2px solid #eb332c;
position: relative;
top: 30px;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
#nav li.last {
border-right: none;
}
#nav li a {
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: 000000;
}
#headings {
position: relative;
height: 400px;
width: 835px;
margin: 0px auto;
}
#headings img {
display: inline;
background-color: #ebebeb;
padding: 150px 0px 50px 0px;
}
#content {
width: 750px;
margin: 0px auto;
}
#bottomleft {
float: left;
width: 400px;
}
#bottomright {
float: right;
width: 300px;
position: relative;
left: 18px;
}
#footer {
background-color: #eb322c;
width: 100%;
height: 140px;
clear: both;
}
#footer_content {
width: 1130px;
background-color: eb332c;
margin: 0px auto;
height: 140px;
position: relative;
color: white;
}
h1 {
background-color: #FFFFFF;
text-align: left;
font-size: 30px;
position: absolute;
top: 60px;
left: 0px;
z-index: 100;
width: 340px;
}
h2 {
font-size: 20px;
position: absolute;
bottom: 20px;
}
h3 {
font-size: 20px;
position: absolute;
bottom: 22px;
position: absolute;
right: 343px;
}
h4 {
font-size: 20px;
position: absolute;
bottom: 20px;
position: absolute;
right: 90px;
}
h5 {
font-size: 18px;
border-bottom: 1px solid #eb332c;
position: relative;
right: 45px;
}
p.para {
font-family: arial;
font-size: 12px;
position: relative;
right: 45px;
}
#bottomleft {
position: relative;
}
#bottomright {
position: relative;
background-color: ebebeb;
width: 268px;
height: 220px;
}
h6.address {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
h6.contactmail {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
h6.commonnum {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
p.email {
position: relative;
top: 34px;
}
#search {
position: absolute;
left: 340px;
top: 12px;
width: 320px;
}
#search img {
margin-top: -9px;
margin-left: 5px;
}
img.accreditations {
float: right;
}
small {
font-size: x-small;
}
p.lorem {
position: relative;
right: 45px;
}
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--
Displays between 768px and 1024px-->
#media only screen and (min-device-width : 768px) and (max-device-width
:1024px) {
#header,#footer_content,#text {
padding: 0px 5px;
width: 50%;
box-sizing: border-box;
}
}
</style>
To be noted that i have used my meta tag inside my style , any help would be appreciated .... Thanks ....
1.) You are using min-device-width and max-device-width which are targeting devices (phones, tablets).
Instead, use min-width and max-width.
This, in conjunction with
<meta name="viewport" content="width=device-width,initial-scale=1"/>
should be sufficient.
2.) You have the <meta> tag inside the <style> tags - it needs to be outside. Try it above the opening <style> tag.
3.) CSS comments are /* comment */ not <!--comment-->.
Change these three things and your code should work.
See this fiddle
your css should be like this
#media only screen and (min-device-width: 400px) and (max-device-width: 1280px) {
/* css for this resolution */
}
#media only screen and (min-device-width: 1281px) and (max-device-width: 1440px) {
/* css for this resolution */
}
You should move the meta-tag outside of your style-tags.
This line:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
Update
Make sure your media query is on a single line:
#media only screen and (min-width : 768px) and (max-width : 1024px) {
}
Demo
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!
This is my first post on stack overflow, so if I do something wrong please inform me :).
This is the HTML:
<nav>
<div><img src="images/logo.png"</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
And the CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa); *{border:1px dotted black;}
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: block;
}
nav div {
display: block;
float:right;
height: 100%;
font-size: 25px;
}
nav:first-child {
float:left;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
This is the fiddle http://jsfiddle.net/LuTLm/ .
My nav has 5 elements: an image and four links. I'm trying to make the apear aligned on the navigation bar, with every element floating to the right, exept the first one (the image) wich floats left and should be resized to fit on the 10% nav.
This shoul be pretty basic. I'm just starting to code web. Alternatives are also welcome as long as they are a actual better solutions.
Sorry, I missed the bit about floating the img left..
clean up the html to close off the IMG tag with /> and then either add a class or inline css to float the div containing the img to the left..
<div style='float:left'><img src="images/logo.png" /></div>
or
<div class='FloatLeft'><img src="images/logo.png" /></div>
.FloatLeft
{
float: left;
}
or
change the css like this
nav div:first-child {
float:left;
}
Just update yuor css from
nav:first-child {
float:left;
}
to
nav div:first-child {
float:left; // make it float left
width: 10%; // resize it to 10% width
}
DEMO
You can also use CSS tables to do navigation bars. I've found they have a lot of nice properties, such as filling up the full width with evenly spaced navigation items, and are well supported in all modern browsers. They even work well with all sorts of semantic markup, including links of lists.
Given the HTML:
<body>
<nav>
<div>
<img src="images/logo.png">
</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
You would use the following CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa);
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: table;
table-layout: auto;
}
nav div {
display: table-cell;
font-size: 25px;
vertical-align: middle;
}
nav div:first-child {
width: 10%;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
DEMO