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
https://www.mywebcards.net
WebCards screenshots used by permission.
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
https://www.mywebcards.net
WebCards screenshots used by permission.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
