I want to change it so when I resize my window everything including divs are resized. Not just the background. I have just started HTML so I may not be familiar with the more advanced concepts. What can I do to resize the divs in my page to fit the window?
This is my main page
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<!-- META -->
<meta charset="UTF-8">
<title>Keyan Kazemian</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type="text/css" type='text/css'>
<link rel="stylesheet" href="styleone.css">
</head>
<body>
<div style="background: rgba(30,26,29,0.7); position: fixed; top:300px; left:440px; height:160px; width:600px; moz-border-radius:5px; border-radius:5px;">
<h1> Keyan Kazemian </h1>
<p> Hello, my name is Keyan and this is my life. </p>
</div>
<a style="display:block" href="about-me.html"> <div class="links">About Me</div> </a>
<a style="display:block" href="#music.html"> <div class="linktwo"> Music </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkthree"> Video </div> </a>
<a style="display:block" href="#comingsoon"> <div class="linkfour"> App Development </div> </a>
</body>
</html>
This is My style sheet
.links { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1046px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
.linktwo { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1252px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkthree { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1458px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 160px;}
.linkfour { background: rgba(30,26,29,0.7); position: fixed; top:300px; left:1664px; height:160px; width:200px; moz-border-radius:5px; border-radius:5px; color:#fcfcf5; font-size: 0.9em; font-family: 'Luckiest Guy', cursive; text-align: center; vertical-align: middle; line-height: 80px;}
a:link {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:visited {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:hover {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
a:active {text-align: center; color: #fcfcf5; text-decoration:none; font-size: 2em; font-family: 'Luckiest Guy', cursive;}
html {
background: url(trop.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {font-size: 100%;}
h1 {color:#fcfcf5; font-size: 3em; font-family: 'Luckiest Guy', cursive; text-align: center;}
p {color:#fcfcf5; font-size: 1.5em; font-family: 'Luckiest Guy', cursive; text-align: center;}
What you are trying to achieve is called responsive layout, which changes as per the screen resolution. Note that, it is not just sufficient to resize divs, Paragraphs etc. but you need to consider lot of other things like
Navigation bar
Images
Grids etc.
Covering RWD in this post is impossible, but you can find lot of stuff on search engine. Still refer these links available here, here and here.
Use CSS media queries for smaller devices also called responsive design (window resize)
Use this with your main stylesheet. Use smaller font size and margin for DIVs so that it can be viewable on small devices.
#media (max-width: 600px) {
selector {
//style for smaller devices
}
}
For example media queries for iPads
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
go through this Link for more information on media queries.
Related
I apologize if this is not the most descriptive, as I only have 7 weeks experience of coding with HTML. So I have encountered an issue with optomizing my webpage for a mobile device using a media query. My Nav bar goes off the screen, my form gets all smashed at the bottom, and my table on a seperate page disappears at 700ish pixels. I will copy and paste the code below for each page that is giving me issues!
Home page with Nav bar and Form issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness</title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<div class="row">
<div class="column">
<img id="homeimage" src="pose.jpg" alt="Big Muscles" title="Yours Truly striking a pose!" style="width:100%">
</div>
</div>
<h2> LEAVE HERE KNOWING MORE THAN YOU USED TO!!</h2>
<p> <span class= "resort"> ZabelFitness </span> is a one-stop shop for athletes of all skill levels. This site exsits to condense<br>
key information that many have to look for over many different sites! I want to make your life easier!!<br> That's why I created this site (named after my Instagram page) to give all athletes legit information<br>they will want or need in their fitness journey!!</p>
</main>
<h2 id="h2home" > Reach Out For Fitness Advice!!</h2>
<h3> Contact Me</h3>
<p>Required fields are marked with an asterisk *</p>
<form method="post" action="mailto:zabel2#ivytech.edu">
<label for="myFName">*First Name:</label>
<input type="text" name="myFName" id="myFName" required="required">
<label for="myLName">*Last Name:</label>
<input type="text" name="myLName" id="myLName" required="required">
<label for="myEmail">*E-mail:</label>
<input type="email" name="myEmail" id="myEmail" required="required" size="35">
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Additional Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
<input type="submit" id="mySubmit" value="Submit">
</form>
<footer>
<small> <i> Copyright © 2021 ZabelFitness<br>
zabel2#ivytech</i></small>
</footer>
</div>
</body>
</html>
exercise page with wonky table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness::About </title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<table>
<tr>
<th colspan="8">Guide To Exercises</th>
</tr>
<tr>
<td>Muscle Group</td>
<td>Chest</td>
<td>Triceps</td>
<td>Biceps</td>
<td>Back</td>
<td>Quads</td>
<td>Calves</td>
<td>Hamstrings</td>
</tr>
<tr>
<td>Exercise</td>
<td>Dumbbell/Barbell Bench PressPush-UpsDecline Dumbbell/Barbell Bench PressIncline Dumbbell/Barbell Bench Press</td>
<td>sds</td>
<td>ssds</td>
<td>sds</td>
<td>sds</td>
<td>sd</td>
<td>sd</td>
</tr>
</table>
</main>
<footer>
Copyright © 2021 ZabelFitness <br>
zabel2#ivytech
</footer>
</div>
</body>
</html>
CSS for all my jank:
header { background-color: #36454F;
padding-top:10px;
height: 120px;
text-align: center;
color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
text-shadow: 2px 2px 8px #000000;
background-position: right;
background-repeat: no-repeat;
margin-bottom: 0%;
padding: 1em;
background-image: url(weights2.jpg);
background-size: 100%;
}
body { background-color: #404040;
color: #666666 ;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto ;
margin-right: auto;
width: 80% ;
}
nav a{
text-decoration: none; color:#000000;
}
h1 a{text-decoration: none; color:#FFFFFF;}
h1 a:link{color:#FFFFFF;}
h1 a:hover{color:#A52A2A;}
h1 { color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
nav a:link{color:#000000;}
nav a:visited{color:#344873;}
nav a:hover{color:#A52A2A;}
nav ul {list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding-left: 0;
max-width:1800px;
text-align: center;
}
nav {text-align: center;}
nav li {padding-top: 1em;
display: inline-block;
padding-left: 3em;
padding-right: 3em;
width: 100%;
border-bottom: 1px solid;
font-size: 1.2em;
text-align: center;
max-width:1800px;
}
h2{ color: #A52A2A ;
font-family: Verdana, Arial, sans-serif ;
line-height: 200% ;
padding-top: 2.5em;
padding-bottom: 2em;
}
h3 {font-family: Georgia, 'Times New Roman', Times, serif;
}
dt { font-weight: bold;
color: #002171
}
main {
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 0;
}
#homeimage {
float:center;
width: 240px;
height: 300px;
}
#homehero {
background-size: 200% 100%;
background-repeat: no-repeat;
}
#abouthero{
height: 300px;
background-size: 200% 100%;
background-repeat: no-repeat;
}
#aboutimage{width:480px;
height: 480px;
}
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 200% 100%;
background-repeat: no-repeat;
}
.resort { font-size: 1.2em;
color: #000033;
}
#wrapper {
background-color: #BEBEBE;
background-image: linear-gradient(#FFFFFF, #BEBEBE);
padding: 1em;
}
footer { font-size: .70em;
padding: 1em;
font-style: italic;
text-align : center;
}
* {box-sizing: border-box;}
section {
padding-left:.5em;
padding-right: .5em;
}
#mobile {display: inline;}
#desktop {display: none;}
#media (min-width: 600px) {
h1{font-size: 2em; letter-spacing: .25em;}
nav ul{flex-direction: row; justify-content: space-around; padding-right: .5em;}
nav li{width: 12em; border-bottom: none;}
section{padding-left: 2em; padding-right: 2em;}
#flow{display:flex; flex-direction:column;}
#mobile{display:none;}
#desktop{display:inline;}
#homehero{background-size: 100% 100%;}
#yurthero{background-size: 100% 100%;}
#trailhero{background-size: 100% 100%;}
#reshero{background-size:100% 100%}
input[type="submit"]{width:9em; grid-column:2/3;}
form{width:60%;
display:grid;
grid-gap:0.5em;
grid-template-columns: 10em 1fr;}
}
#media (min-width: 1801px) {
body{background-color: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);}
nav ul{padding-right: 10%; padding-left: 10%; padding-bottom:3em;}
#wrapper{margin:auto; width: 80%;}
#aboutimage{width:360px; height: 360px;}
header{background-image:100% 100%}
#homeimage{width:360px; height: 360px; float: center; }
#media (min-width: 1080px) {
table thead {
display: none;
}
table td {
display: flex;
}
table td::before {
content: attr(label);
font-weight: bold;
width: 120px;
min-width: 120px;
}
}
textarea, input{margin-bottom:.5em; width: 400px;}
.column {
float: left;
width: 33.33%;
padding: 5px;
padding-top: 10px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
table{
margin: auto;
text-align: center;
border: 1px solid #3399CC;
width: 90%;
border-collapse: collapse;
}
td, th{
color: #000;
padding: 5px;
border: 1px solid #3399CC;
}
td{text-align: center;}
.text{
text-align: left;
}
tr:nth-of-type(odd){ background-color: #B0B0B0;}
tr:nth-of-type(even){ background-color: #696969;}
THANK YOU IN ADVANCE!!! :)
You should only place the max-width in the body tag along with a min-width in your css. You are setting your ul to a max-width of 1800px which is for a desktop. When you set a min-width to the body it will adjust for phones.
body{
max-width: 1800px;
min-width: 200px;
}
If your code is specific to phones only where they would not be viewed in a browser on a laptop or desktop, you could set the max-width:400px. Thus on a phone the browser will span only 400px and if the user minimized the window, the smallest it would get is 200px;
My example means a laptop/browsers will only expand to 1800px on a 1900 resolution screen and then when I minimized the browser on my laptop or in a phone 200px is minimum.
You can play around with the values testing in your browser to see how your data flows. You may have to adjust other tags to flow.
On W3Schools in regards to flex boxes it mentions this
/* Responsive layout - makes a one column layout instead of a two-column layout */
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
W3 Schools Flexbox Responsive webpages
I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap
HTML
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3>Create actions and animations!<br>
<br>
Start Learning Javascript <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn Javascript!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*divs*/
.sidecontentleft {
align-self:center;
height:300px;
width:300px;
float:left;
}
.sidecontentright {
align-self:center;
height:300px;
width:300px;
float:right;
}
.sidecontent {
text-align:center;
height: 300px;
display: table-cell;
vertical-align: middle;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
}
/*buttons*/
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
/*Fonts*/
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
Your help would be appreciated! Thanks!
As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. For more control, use Bootstrap or Materialize, or another framework. It will also be much quicker. No person in their right mind would frown on going simpler.
.txt-jumbo, which styles the header font, has a default value of 100px. The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.
To make the font smaller on small screens, try something like:
#media (max-width: 600px) {
.txt-jumbo {
font-size: 50px;
}
}
where max-width: 600px means that the styles contained apply to screens less than 600px wide.
There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.
#media (max-width: 600px) {
li {
display: inline-block;
width: 100%;
}
}
When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.
1)For Header I use 2 Media Query Like This :
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
2)For navbar I use % instead of px.Like this :
li {
margin: 10px 2% 10px 1px;
//More Code
}
li a {
padding: 5% 7%;
//More Code
}
3)For Footer Information Languages,I have changed your code a little bit.
Full Code:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
margin: 10px 2% 10px 1px;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}
li a:hover {
background-color: #111;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
.con {
margin-top: 10px;
width: 100%;
clear: both;
}
.content {
padding: 10px;
}
.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
#media screen and (max-width:920px) {
.sidecontentleft {
width: 50%;
box-sizing: border-box;
}
}
#media screen and (max-width:650px) {
.box {
width: 100%;
float:none;
padding: 20px;
}
.content {
width: 70%;
margin: auto;
}
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="con">
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="box right">
<div class="content">
<h3>Learn the Cascading Style Sheet of web development!</h3>
<h4>Start Learning <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>LLearn data storing in web development!</h3>
<h4>Start Learning PHP <em>now</em></h4>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
</div>
<div class="con">
<div class="box right">
<div class="content">
<h3>Create actions and animations!</h3>
<h4>Start Learning Javascript <em>now</em></h4>
<button class="green-btn txt-marginall">Learn JavaScript!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML5 <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</div>
Working through a tutorial to learn about CSS and I am trying to figure out how some whitespace is being created. When I inspect the page, the whitespace is within the body tag. I thought the body tag would put all text within the background image. But when I re-size the window there is various degrees of white space created (as you can see in the image).
I would like to create a new row for the More Text so that when the screen is re-sized smaller, the row remains below the image--instead of creating the whitespace between. Thanks for any help.
html
{% load staticfiles %}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page-header">
<h1>Title</h1>
</div>
<div class="page-footer">
<h1>More text</a></h1>
</div>
</body>
</html>
css
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
bottom:0;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
You can use media queries to define attributes for a given element for smaller screen.
#media screen and (max-width: 800px){
.myclass{
myattribute:myvalue;
}
}
A easier and better solution would be using a third party framework like bootstrap or foundation which has a grid system for responsive design.
I looked at your css on codepen:
http://codepen.io/artchibald/pen/KrJdpY
It seems you have a bottom 0 declared in the css, below is the corrected version:
h1 a {
color: #666699;
font-family: 'Lobster';
}
body {
background-image: url('../images/Death_to_stock_photography_wild_6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.page-header {
background-color: transparent;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-footer {
background-color: transparent;
position:absolute;
padding: 20px 20px 20px 40px;
/* REMOVE THIS--------bottom:0; */
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: gray;
font-size: 26pt;
text-decoration: none;
position: relative;
bottom: 10px;
height: 5px;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
color: #666699;
}
I am having an issue resizing my background images for the iPhone. When I'm in developer mode they appear normal but on iPhone they're blurry and messed up (see pics for difference).
The first pic is what it's suppose to look like for the iPhone. I tried everything I could think of. Please visit http://nlm-marketing.herokuapp.com/ and if you have an iPhone, view it from there so you'll see exactly what I'm talking about. Please help. Thanks!
CSS
#media only screen /*iPhone*/
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.img-bg {
overflow: hidden;
background: url('/images/341778467.jpg') no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: auto !important;
max-width: 100%;
width: 100%;
z-index: -1;
}
}
use this code i hope it's work for you
CSS
#media only screen /*iPhone*/
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.img-bg {
height: 650px;
padding: 300px;
background: url('img2.jpg');
background-size: cover;
background-attachment: fixed;
}
.img-bg p {
text-align: center;
text-transform: uppercase;
color: #fff !important;
font-size: 50px !important;
font-family: 'Work Sans', sans-serif !important;
position: absolute;
text-shadow: 2px 2px #000;
left: 17%;
}
.img-bg2 {
padding: 330px;
background: url('img1.jpg');
background-size: cover;
background-attachment: fixed;
}
.img-bg2 p {
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 35px;
font-family: Arial;
text-shadow: 2px 2px #000;
margin-top: -100px;
}
.content {
height: 800px;
background-color: #212121;
}
.content p {
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 15px;
font-family: Arial;
margin-top: 30px;
}
.content2 {
height: 900px;
}
#content {
padding: 200px;
background-color: #282829;
color: #fff;
text-align: center;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="content">
<div class="content">
<div class="img-bg">
<p id='title'> Established in 2004, </p>
</div>
<p><strong><span id='span-one'style='color:#fff; font-size: 45px; font-family: Work Sans; text-shadow: 2px 2px #000;'> Lorem Ipsum is simply dummy tex</p>
</div>
<div class="content2">
<div class="img-bg2">
<p><strong><span id='span-two'style='font-family: Work Sans; color:#fff ; font-size: 2em; font-style: italic'></span></strong> Throughout the years NLM Marketing has established extensive relationships with the leading distributors that have helped propel many products in becoming household name brands. Our staff consist of professionals with extensive experience in the Meat, Dairy, Frozen, Deli and Seafood categories. NLM and its staff have become the link between Manufactures, Packers, Distributors and owners/managers of Key Retailers.</p>
</div>
</div>
</div>
</body>
</html>
I am trying to put in a different image for each resolution. It worked for normal screen and smartphones, however I cannot get it to show up for the large resolution screens. Here are the relevant sections of code:
CSS:
/* Large screens ----------- */
#media only screen
and (min-width : 1800px) {
html {
background: #000000 url(images/blackmagic.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color:transparent;
font-size: 100%;
color:#000000;
}
h1 {
color:#000000;
text-transform:uppercase;
font-family: 'Sancreek', Impact, sans-serif;
font-size:2.5em;
}
h2 {
font-family: 'Pathway Gothic One', Verdana, sans-serif;
font-size:1.875em;
color:#000000;
}
a:link {
color:#000000;
}
a:hover {
color:#9b0505;
}
p {
color:#000000;
font-family: 'Monda', Verdana, sans-serif;
font-size:0.875em;
text-align:justify;
}
#container {
position:relative;
width: 2200px;
margin: 0 auto;
z-index: 0;
}
#social {
position:relative;
margin-left: 450px;
z-index: 0;
}
#header {
display:none;
position:relative;
}
#headerm {
display:none;
position:relative;
}
#headerl {
position:relative;
z-index:1;
margin-top:-500px;
margin-left:200px;
width: 100%;
}
HTML:
<div id="container" class="outer">
<div id="border" class="outer">
<div id="header" class="inner">
<img src="/images/header.png" id="headerimage" />
</div>
<div id="headerl" class="inner">
<img src="/images/headerlg.png" id="headerimage" />
</div>
<div id="headerm" class="inner">
<img src="/images/headerm.jpg" id="headerimage" />
</div>
There is no HTML ? Also posting a quick fiddle would make this so much easier to debug!
I actually just figured it out!
Because I was hiding the DIV for regular Desktop/Laptop Resolution and not defining the max-width for that value in its Media Query, it was also hiding it in the Large Resolution Media Query.
Simple fix of defining a max-width value for Standard Res.
Thanks! :)