g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

Reduce the Width of the WebCards Layout

In this tutorial, we will continue to customize the WebCards layout. As mentioned earlier, the Facebook iframe canvas is only 510 pixels wide. So, we will need to change the width of the layout.

If you open the template.html file, you will see that there is a div called container which encloses the entire webpage. You will find this div directly after the body tag.

<body>
<div id="container">

We can use the CSS max-width property to prevent the width of this container div to go beyond 510 pixels. Open the webcards.css file and find the style for the container div.

#container{
width: 80%;
min-width: 800px;
margin: 0 auto;
}

We will want to change the width property to 510 px and the min-width to max-width.

#container{
width: 510px;
max-width: 510px;
margin: 0 auto;
}

That takes care of the width. Rules are made to be broken, aren't they? If you wish to be very sure that the webpage doesn't go beyond 510 pixels in some problematic web browsers, you can enclose the contents of the container in one of those old-fashioned and sinful tables with a width of 510 pixels. We can put the table code just after the container div. You will want to close the table at the bottom of the container code.

As you can see, the text on the page appears to be large and not in proportion to the width of our layout. We can make a change to the webcards.css file that will reduce the font size to .625em.

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor