I have been reworking (index_new.html) my homepage to try to make it friendier for mobile viewports.
The current homepage: http://www.vintagetextile.com/
Below is the code for the provisional reworked home page as well as the two new style sheets.
For viewports smaller than desktop, e.g., < 900px wide, various sections of the homepage are hidden.
For the small tablet (521-700px), only two pictures are displayed.
For the smartphone <=520px, only one picture is displayed. One obvious probem on the smartphone: the sole picture is not centered. I have tried “text-align:center”.
Here are other issues and questions:
- The 3 images are quite large: 800X1170px constrained down to 400X585px and scaled by float-left and float:right. I am using such large .jpgs to get high resolution. Would the experts suggest a different ratio than 4:1 of pixels downloaded pixels to of apparent size?
I want to stay with 400X585 as that fits the design; the ratio should remain 1.46. But perhaps my basic .jpgs should be a different size from the 800X1170px used?
html {height: 100%; padding-bottom: 1px; }
body {width: 88%;max-width: 980px;margin: 0 auto; border:0; color:#000; background-color:#fff;
font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif; }
I don’t remember why I originally styled “html”. Any views on those two rules?
Perhaps “width:88%” ,using 12% of viewport for margins, is too large for smaller viewports?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="google-site-verification" content="IVrah1ReyM-Z6ky-CjLafpZi3HsEb8UHdiJkTtEtmog" />
<title>VintageTextile | Vintage Clothing | Vintage Costume</title>
<meta name="description" content="High style vintage clothing,historic costume,haute couture,designer fashion,decorative textiles (1690-1960) & shawls for the discriminating collector." />
<meta name="keywords" content="vintage clothing,1920s dresses,vintage clothes,high style clothing,vintage dresses,party dress,vintage dresses,vintage couture,vintage evening gowns,historic costume,bridal gowns,flapper dress,shawls,audrey hepburn,vintage textiles" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style_sheets/home_new.css" />
<link rel="stylesheet" type="text/css" href="style_sheets/homemenus.css" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body id="home">
<div><img src="images/Graphics/logohome.gif" width="269" height="74" id="top" alt="vintageTextile.com" />
<h1>High Style Vintage Clothing<br />& 18th Century Costume</h1></div>
<div class="images" id="bottomBorder"><span><img src="images/1920%27s/c422home.jpg" alt="Fortuny peplos" width="800" height="1170" class="tall picleft" /><img src="images/Edwardian/2762p.jpg" alt="Callot Soeurs" width="800" height="1170" class="tall hpic2" /><img src="images/1920%27s/1336o.jpg" alt="1920s gold dress" width="800" height="1170" class="tall picright hpic1" /></span></div>
<ul class="nav">
<li><a href="early.htm">Early</a></li>
<li><a href="victorian.htm">Victorian</a></li>
<li><a href="edwardian.htm">Edwardian</a></li>
<li><a href="1920s_to_1930s.htm">1920s to 1930s</a></li>
<li><a href="1940s_to_designer.htm">1940s to Designer</a></li>
<li><a href="shawlstext.htm">Shawls/Textiles</a></li>
<li><a href="gallery.htm">Gallery</a></li>
<li><a href="treasure_hunt.htm">Treasure Hunt</a></li>
<li><a href="searchvt.htm">Search</a></li>
<li><a href="order.htm">To Order</a></li>
<li><a href="mailto:Linda@vintagetextile.com">Email</a></li>
<li class="home"><a href="index.html">Home</a><span>Home</span></li></ul>
<div id="format">
<div id="preface">
<p>Vintage Textile is proud...and Shawls/Textiles.</p>
<div class="hide"><p>We have...to the present. </p>
<p>With a background...connoisseurs worldwide.</p> </div>
</div>
<h3><a class="sr" href="http://www.facebook.com/pages/VintageTextilecom/388978794490710" title="VintageTextile.com Facebook"><img src="images/Graphics/f_logo.jpg" width="50" height="50" alt="facebook logo" /></a> For the latest at VintageTextile.com, please visit our <a class="sr" href="http://www.facebook.com/pages/VintageTextilecom/388978794490710" title="VintageTextile.com Facebook">Facebook page!</a></h3>
<p>Check out our <a class="ct" href="https://www.facebook.com/pages/VintageTextilecom/388978794490710?sk=photos_albums" title="VintageTextile.com Facebook">Facebook albums</a> devoted to <em>Vintage Textile Brides</em> and <em>Belle Epoque</em>, the most recent in a series of albums from the VintageTextile archives.</p>
<h3><a class="sr" href="searchvt.htm">Search</a> the site.</h3>
<p>Click on "Search" or <a class="ct" href="#categ">choose a category</a> at the top of the page to find the perfect vintage gown or accessory. Great design never goes out of style!</p>
<div class="updatetop">Update Schedule</div>
<p class="largecat"><b>March 20, 2014</b><strong>—</strong>The Early, Victorian, 1920s-1930s, 1940s-Designer, and Shawls/Textiles sections will be updated.</p>
<p class="largecat"><b>February 18, 2014</b><strong>—</strong>The <a href="treasure_hunt.htm">Treasure Hunt</a><a href="1940s_to_designer.htm"></a> section has been updated.</p>
<p class="largecat"><b>November 11, 2013</b><strong>—</strong>The <em><a href="brides.htm">Vintage Textile Brides</a></em> article has been updated.</p>
<p class="largecat"><strong>June 8, 2012—</strong>For valued clients over the years, I have
been happy to provide to the future bride the gown she will wear on the most important day of her
life. The updated <a href="brides.htm" class="main">Vintage Textile Brides</a> page shows a selection
of these gowns as first presented here and then in all their glory at the wedding.</p>
<p class="largecat"><b>December 14, 2009</b>—The Gallery of sold items has been updated. This photo archive will be an evolving category available for study and enjoyment. Enter <a class="main" href="gallery.htm">The Gallery</a>.</p>
<p class="largecat">If you would like to be notified when the site is updated, please send your name and email address to <a href="mailto:update@vintagetextile.com" class="main">update@vintagetextile.com</a></p>
<div class="hide"><div class="updatetop">Articles</div>
<div class="articlesub">
<p>January, 2011—Enjoy our new section on <a href="brides.htm" class="main">Vintage Textile Brides</a></p>
<p>December, 2008—Read our updated article on the <a href="vintage_advantage.htm" class="main">Vintage Advantage </a></p>
<p>March, 2007—Read our article on the <a href="little_black_dress.htm" class="main">Little Black Dress</a>.</p>
<p>December, 2006—Our article on the <a href="storage%20of%20Vintage%20clothing.htm" class="main">Storage of Vintage Clothing and Textiles</a>.</p>
<p>To gain an in-depth understanding of the field, please review our comprehensive ongoing
series of original articles on all aspects of collecting and investing in vintage clothing. </p></div>
<div class="articlesub">
<p><a href="articles.htm" class="main"><span class="x12"> Article Page </span></a></p></div>
<div id="updatepub">Vintage Textile in print</div>
<div class="book"><img src="images/Graphics/roadshowx.jpg" alt="Antiques Roadshow book" width="204" height="250" class="bookleft" /><img src="images/Graphics/book1x.jpg" alt="Vintage Fashion Price Guide" width="173" height="250" /><img src="images/Graphics/inspirations.jpg" alt="VT tambour pictures" width="200" height="250" class="bookright" /></div>
<div class="cl"><ul>
<li><em>Antiques Roadshow Collectibles—the Complete Guide (2003)</em> by Carol Prisant </li>
<li><em>Price Guide to Vintage Fashion and Fabrics</em> by Pamela Smith</li>
<li><em>Inspirations "In Love with Tambour"—</em>Vintage Textile pictures</li>
<li><em>Handbag Chic—200 Years of Designer Fashion</em> by Desire Smith</li>
<li><em>Virtual Vintage</em> by Linda Lindroth & Deborah Tornello </li>
<li><em>Victoriana Magazine</em>: article on Storage of Vintage Clothing</li>
<li><em>The Seductive Shoe</em> by Jonathan Walford</li>
<li><em>Secret Services—Your Pocket Fashion Guide</em> by Cary Whitley</li></ul></div>
<div class="book"><img src="images/Graphics/handbagchicx.jpg" width="204" height="250" alt="Handbag chic" class="bookleft" /><img src="images/Graphics/virtualvintage.jpg" alt="Virtual Vintage book" width="173" height="250" /><img src="images/Graphics/Victoriana0507.jpg" width="200" height="250" alt="Victoriana Magazine" class="bookright" /></div>
<div class="book1"><img src="images/Graphics/shoebook.jpg" alt="Seductive Shoe book" width="241" height="250" class="bookleft2" /><img src="images/Graphics/secretservices.jpg" alt="secret services book" width="241" height="250" class="bookright2" /></div>
<div id="measure">Measurements and Fit</div>
<p class="articlesub">Do you need help with how to take your measurements? <a href="new_page_145.htm" class="main">Enter</a></p>
</div>
<div class="updatetop">Layaways</div>
<p class="articlesub">For information about our Layaway Policy, check the <a href="order.htm" class="main">Order Page</a> for details.</p>
<div class="updatetop hide"><a href="links.htm">Links</a></div>
<p id="s3">Copyright 1999-2014 by Vintage Textile, all rights reserved.</p>
<p id="s2"><a href="privacy.htm">Privacy Policy</a></p>
</div></body>
</html>
home_new.css
html {height: 100%; padding-bottom: 1px; }
body {width: 88%;max-width: 980px;margin: 0 auto; border:0; color:#000; background-color:#fff;
font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif; }
#top{margin-top:1em}
img {max-width: 100%;border:none;height: auto !important;}
.center img.tall {width: 100%; max-width: 400px; height: auto;}
.images span { display: inline-block; overflow: hidden;text-align:center}
.images .tall {width:32.4%;max-width:400px; height:auto; vertical-align:top;}
img.tall {width:400px;height:585px;}
img.wide {width:600px;height:500px;}
#bottomBorder {padding-bottom: 0.5em; border-bottom: #fc6 solid 1em;}
.picleft{border:0;float:left;}
.picright{border:0;float:right;}
.bi{font-weight:bold;}
#cat{padding-top:0.2em;font:1.1em Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
.updatetop{padding:.3em;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em
"Times New Roman",Times,serif;}
#measure{padding:.3em .3em .3em;clear:left;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em "Times New Roman",Times,serif;}
h3{display:block;padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;color:Black;font:1.3em
"Times New Roman",Times,serif;}
a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
#updatepub{padding:.3em;margin:1em 0;background-color:#F5EBD6;color:Black;font:bold 1.4em
"Times New Roman",Times,serif;}
.x12{font-size:1em;}
.articlesub{font:1.1em Verdana,Tahoma,Helvetica,sans-serif;}
#preface {padding:.3em; margin-bottom:1.2em; font-size:1.04em;line-height:1.17}
#format{width:80%;word-spacing:-.1em;margin-left:auto; margin-right:auto;}
a:link{color:#000;text-decoration:none;}
a:visited{color:#8B0000;text-decoration:none;}
a:hover{color:red;text-decoration:none;}
a.main:link{color:#D2691E;text-decoration:underline;background-color:#fff;}
a.main:visited{color:#8B0000;text-decoration:underline;background-color:#fff;}
a.main:hover{color:red;text-decoration:underline;background-color:#fff;}
xh1{display:block;float:right;height:74px;width:60%;font:bold 1.1em Verdana,Tahoma,Helvetica,sans-serif;position:relative;left:20%;color:#666666;margin-top:4%;}
h1{display:block;font:bold 1.1em Verdana,Tahoma,Helvetica,sans-serif;color:#666666;
padding:0.2em 12px 0.35em; margin-bottom:0.5em;margin-top:4%;float:right;}
div.cl ul {list-style-type:none;line-height:1.3;}
div.cl{clear:both;margin-top:.4em;}
#s3{font-size:.8em;font-weight:bold;text-align:center;}
#s2{font-size:.72em;text-align:center;}
.book{margin-left:auto;margin-right:auto;}
.book img{border:0;vertical-align:bottom;}
.bookleft{border:0;margin-right:6%;}
.bookright{border:0;margin-left:6%;}
.book1{margin-top:1.8em;}
.book1 img{border:0;vertical-align:bottom;}
.bookleft2{border:0;margin-right:3%;margin-left:9%;}
.bookright2{border:0;margin-left:3%;}
p.largecat a#burn {color:#00f;background-color:#fff;text-decoration:underline}
a.ct:link{color:#00f;text-decoration:none;background-color:#fff;}
a.ct:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
a.ct:hover{color:red;text-decoration:none;background-color:#fff;}
@media only screen and (max-width:900px)
{.hide{display:none;}}
@media only screen and (max-width:700px)
{.hpic1{display:none;}
.images .tall {width:48%;max-width:400px; height:auto; vertical-align:top;} }
@media only screen and (max-width:520px)
{ .hpic2{display:none;}
.images .tall {width: 70%;max-width:400px; height:auto; vertical-align:top; } }
homemenus.css
.nav {list-style:none;
display:table;
width:100%;
text-align:center;
word-spacing:-1em;
padding:0;
margin:0;}
.nav{padding-bottom:3px;}
.nav li { display:inline-block;
word-spacing:0;}
.nav li:before { content:":";
display:inline-block;
padding:0 1px;}
.nav li:first-child:before { content:"";
padding:0;}
.nav a,
.nav span { display:inline-block;
text-decoration:none;
padding:.1875em .4375em;}
.nav a:link,
.nav a:visited {color:#8b0000;}
.nav a:hover { color:#8b0000;
background-color:#f5ebd6;
text-decoration:underline;}
.nav a:active {color:#f00;}
.nav span { display:none;
color:#000;
background-color:#f5ebd6;}
#home .home a {display:none;}
#home .home span { display:inline-block;}
