Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsAdaptive Images
Has Anyone Successfully Incorporated Adaptive Images Into Their Website???
I Need To Add It To My Website For Handheld Devices, Like iPhones And Tablets.
6 Answers
Joe Hirst
Courses Plus Student 6,489 PointsYou can use svg files or create responsive images with CSS.
I would recomend you start the HTML and CSS lessons for building a responsive website.
The CSS basics are awesome! http://teamtreehouse.com/library/build-a-responsive-website
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsI have The Adaptive Images In The Site, Thanks :-)
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsI Joseph I Don't Have An iPhone Or Tablet, Could You Let Me Know How It Looks Please???
Thanks A Bunch :-)
Joe Hirst
Courses Plus Student 6,489 PointsIt’s working of a fashion, but your main content container looks like it’s having some issues.
I’ll have a look at your CSS and see if I can tell what’s going on.
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsOk Here Is The CSS File
/*global*/
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #4169E1;
background: url('img/background.jpg') repeat;
}
.container {
border: 1.5625em outset #ADD8E6; margin: 6.25em;
background: #ADD8E6; }
/*typography*/
h1 {
font-size: 1.750em;
letter-spacing: -1.5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h2 {
font-size: 1.500em;
color: #4169E1;
}
h3 {
font-size: 1.125em;
color: #4169E1;
}
/*buttons*/
a.btn {
color: #4169E1;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 0.46875em 0.9375em;
margin: 1.25em 0px;
border-radius: 1.5625em;
text-transform: uppercase;
}
.btn:hover {
background-color: #4CC4A7;
}
/*navigation*/
a:link {
color: #4169E1;
text-decoration: none;
}
/*content*/
img {
border: 0.5em solid #4169E1;
margin: 0 0 1.25em 0;
max-width:100%;
}
img {
max-width: 100%;
}
#copyright {
border-top: 0.0625em solid #2A0400;
padding: 0.625em 0px;
margin: 0.9375em 0px;
text-align: center;
}
/*media queries*/
/*Small Resolution -----------*/
@media screen and (max-width: 320px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width: 100%;
}
#nav a {
margin: 5% 0;
}
#nav a {
-webkit-user-select: none;
}
#nav a.O.I.C.C. {
width: 100%;
}
#nav a.Edwin_and_Walter_Hawkins {
width: 100%;
}
#nav a .Other_Gospel_Artist {
width: 100%;
}
#nav a.A_Grammy_Nominee {
width: 100%;
}
#nav a.Doctorate_In_Music {
width: 100%;
}
#nav a.Music_Ministry_Request {
width: 100%;
}
#nav a.Beliefs {
width: 100%;
}
#nav a.Music_Biography {
width: 100%;
}
#nav a.Praise_Report_Form {
width: 100%;
}
#nav a.Prayer_of_Salvation {
width: 100%;
}
#nav a.Prayer_Request_Form {
width: 100%;
}
#nav a.News_and_Events {
width: 100%;
}
}
/*media queries*/
/*Medium Resolution-----------*/
@media screen and (max-width: 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width: 100%;
}
#nav a {
margin: 5% 0;
}
#nav a {
-webkit-user-select: none;
}
#nav a.O.I.C.C. {
width: 100%;
}
#nav a.Edwin_and_Walter_Hawkins {
width: 100%;
}
#nav a .Other_Gospel_Artist {
width: 100%;
}
#nav a.A_Grammy_Nominee {
width: 100%;
}
#nav a.Doctorate_In_Music {
width: 100%;
}
#nav a.Music_Ministry_Request {
width: 100%;
}
#nav a.Beliefs {
width: 100%;
}
#nav a.Music_Biography {
width: 100%;
}
#nav a.Praise_Report_Form {
width: 100%;
}
#nav a.Prayer_of_Salvation {
width: 100%;
}
#nav a.Prayer_Request_Form {
width: 100%;
}
#nav a.News_and_Events {
width: 100%;
}
}
/*media queries*/
/*Large Resolution-----------*/
@media screen and (max-width: 640px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width: 100%;
}
#nav a {
margin: 5% 0;
}
#nav a {
-webkit-user-select: none;
}
#nav a.O.I.C.C. {
width: 100%;
}
#nav a.Edwin_and_Walter_Hawkins {
width: 100%;
}
#nav a .Other_Gospel_Artist {
width: 100%;
}
#nav a.A_Grammy_Nominee {
width: 100%;
}
#nav a.Doctorate_In_Music {
width: 100%;
}
#nav a.Music_Ministry_Request {
width: 100%;
}
#nav a.Beliefs {
width: 100%;
}
#nav a.Music_Biography {
width: 100%;
}
#nav a.Praise_Report_Form {
width: 100%;
}
#nav a.Prayer_of_Salvation {
width: 100%;
}
#nav a.Prayer_Request_Form {
width: 100%;
}
#nav a.News_and_Events {
width: 100%;
}
}
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsAdd .htaccess and adaptive-images.php to your document-root folder.
Ok Here Is The HTML INDEX File The .htaccess and adaptive-images.php Are On The Bottom Of The Page
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Page description. No longer than 155 characters." />
<title>Dr. Maggie Wincher Music Ministries</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
<style>
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #4169E1;
background: url('img/background.jpg') repeat;
}
</style>
</head>
<body>
<div class="container clearfix">
<p id="Dr. Maggie Wincher.html"></p><br>
<div id="title" class="grid_12">
<em><h1>Dr. Maggie Wincher Music Ministries</h1></em>
</div>
<div class="grid_4">
<img src="img/dr._maggie_wincher.jpg">
<em><h4>Dr. Maggie Wincher</h4></em>
</div>
<div class="grid_8 omega">
<p cite="http://www.biblegateway.com/passage/?search=Psalm+68%3A4&version=NIV">
<em><h2><p>Sing to God, sing in praise of his name, extol him who rides on the clouds;
rejoice before him—his name is the Lord. -Psalm 68:4</p></em></h2></p>
<em><h3>My Mission</em></h3>
<p>"The mission of Dr. Maggie Wincher Music Ministries is to aggressively fulfill the commission that Jesus Christ gave to His followers to go into the world and make disciples of all people. My purpose is to bring the lost to Jesus Christ and to build up and encourage those who are already believers."</p> <br>
</div>
<div class="grid_4">
<a href="O.I.C.C..html" class="btn"><em>O.I.C.C.</a></em><br>
<br>
<a href="Edwin and Walter Hawkins.html" class="btn"><em>Edwin and Walter Hawkins</a></em><br>
<br>
<a href="Other Gospel Artist.html" class="btn"><em>Other Gospel Artist</a></em><br>
<br>
<a href="Love Center Ministries.html" class="btn"><em>Love Center Ministries</a></em><br>
<br>
<a href="A Grammy Nominee.html" class="btn"><em>A Grammy Nominee</a></em><br>
<br>
<a href="Doctorate In Music.html" class="btn"><em>Doctorate In Music</a></em><br>
<br>
<a href="Music Ministry Request.html" class="btn"><em>Music Ministry Request</a></em><br>
<br>
</div>
<br>
<div class="grid_4 omega">
<a href="Beliefs.html" class="btn"><em>Beliefs</a></em><br>
<br>
<a href="Music Biography.html" class="btn"><em>Music Biography</a></em><br>
<br>
<a href="Praise Report Form.html" class="btn"><em>Praise Report Form</a></em><br>
<br>
<a href="Prayer Of Salvation.html" class="btn"><em>Prayer Of Salvation</a></em><br>
<br>
<a href="Prayer Request Form.html" class="btn"><em>Prayer Request Form</a></em><br>
<br>
<a href="News and Events.html" class="btn"><em>News and Events</a></em><br>
<br>
<br>
<br>
<br>
</div>
<br>
<br>
<div class="grid_4">
<img src="img/pastor_and_wife_install-concert.jpg">
<em><h4>Pastor and Wife Install</h4></em>
</div>
<div class="grid_ 4 omega">
<h2><em><p>Pastor and Wife Install-Concert</p></h2></em>
<p>Maggie Wincher, director of the Love Center Adult Reunion Choir
An electrifying night, again from beginning to end, people from far and near came to help us welcome our new Pastor and Wife, Jamie and Myiia in the the fellowship of Pastorhood.<br>
<br>
(my new word) It was a spectacular site to see this joyous occasion that turn into a confluence of revival, musical, reunion, and just one big loving experience.<br>
<br>
From front to the back of the church people were blessed by the ministry of Love Center Choir, Love Center Adult Reunion Choir, Tramaine Hawkins, Lawrence Matthews, Pastor Donnie McClurkin, Tye Tribbett and of course our own praise team, The Worship Warriors. God showed up and knocked our socks off!<br>
<br>
I would also like to thank Elder Eric Marshall from Glad Tidings COGIC for helping me with my photos. All the good ones he took. Thank you so much, you are truly a blessing to the body of Christ.<br>
<br>
Please go to his FB to see more pix, he has a more extensive account of all three days. God bless you richly Elder Marshall. Also Fayette Michael Patton from Lillie of the Valley COGIC took pix. Thanks Fayette.<br>
By: Rebecca Bains Matthews</p><br>
</div>
<br>
<br>
<div id="contact" class="grid_12 omega">
<p>Call me: <span>1-510-263-8120</span><br>
Email me: <a href="#">Maggie Wincher@yahoo.com</a><p>
</div>
<div class="grid_12 omega">
<p>I announce all of my news and events through Facebook & Twitter.</p>
<a href="https://www.facebook.com/maggiewincher"><img src="img/facebook_icon.jpg" alt="Facebook_icon"></a>
<a href="https://twitter.com/intent/follow?®ion=follow_link&screen_name=musicgurl1961&source=followbutton&variant=2.0"><img src="img/twitter_icon.jpg" alt="Twitter_icon"></a>
</div>
<div id="copyright" class="grid_12">
<p>© 2014 Maggie Wincher Music Ministries. All Rights Reserved.</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$( function() {
causeRepaintsOn= $("h1, h2, h3, a, p");
$(window).resize(function) {
causeRepaintsOn.css("z-index, 1");
});
});
</script>
.htaccess
adaptive-images.php
</body>
</html>
CRYSTAL MORRIS
Courses Plus Student 2,809 PointsAdd .htaccess and adaptive-images.php to your document-root folder.
Could You Connect To My Computer??? I Don't Know How To Do This :-(