Permalink
Browse files

Achieving a more fluid feel to the responsiveness.

Ive commented out the widths applied to the .box class as this was making it jump from set width to set width depending on your viewport size. I set a max-width to your container to force it stop scaling at 960px.

I also added a new class to your thumbnail so I could set a max-width on that to stop it forcing the intro module down on to a new line.
  • Loading branch information...
1 parent 601bae9 commit 1d1662ef0ffa1aa20334523410f0d5c18cf00cc2 @sirbrad sirbrad committed May 12, 2012
Showing with 14 additions and 6 deletions.
  1. +4 −4 Assets/Styles/mobile.css
  2. +9 −1 Assets/Styles/structure.css
  3. +1 −1 index.html
@@ -1,14 +1,14 @@
/* iPad Landscape */
@media only screen and (max-width: 1024px) and (orientation:landscape) {
.box {
- width: 964px;
+ /*width: 964px;*/
}
}
/* iPad Portrait */
@media only screen and (max-width: 768px) and (orientation:portrait) {
.box {
- width: 708px;
+ /*width: 708px;*/
}
#picture {
@@ -28,7 +28,7 @@
/* iPhone Landscape */
@media only screen and (max-width: 480px) {
.box {
- width: 420px;
+ /*width: 420px;*/
}
#picture {
@@ -95,7 +95,7 @@
/* iPhone Portrait */
@media only screen and (max-width: 320px) {
.box {
- width: 260px;
+ /*width: 260px;*/
}
.follow {
@@ -35,8 +35,12 @@
overflow: hidden;
}
+.container {
+ max-width:960px; /* Added a max width here to stop the entire site being contained my the browser viewport */
+}
+
.box {
- width: 960px;
+ /*width: 960px;*/
}
.list {
@@ -112,6 +116,10 @@
width: 68.9583333%; /* 662px / 960px = percentage (move decimal over 2 places) */
}
+.thumb {
+ max-width:25%; /* 240 / 960. Max width added here to force the image to scale appropriately */
+}
+
.intro h1 {
margin-bottom: 0;
}
View
@@ -36,7 +36,7 @@
<aside class="pos-abs right">
<a href="http://www.twitter.com/integralist" class="btn twitter follow"><span></span>FOLLOW</a>
</aside>
- <img id="picture" class="rounded align-left" src="">
+ <img id="picture" class="rounded align-left thumb" src="">
<div class="align-left intro">
<h1>Integralist</h1>
<p><a href="http://www.twitter.com/integralist">@integralist</a></p>

0 comments on commit 1d1662e

Please sign in to comment.