{"id":521,"date":"2010-11-21T22:17:33","date_gmt":"2010-11-22T04:17:33","guid":{"rendered":"http:\/\/krisbunda.com\/blog\/?p=521"},"modified":"2011-08-06T20:41:22","modified_gmt":"2011-08-07T01:41:22","slug":"css-elastic-layout-using-ems","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2010\/11\/21\/css-elastic-layout-using-ems\/","title":{"rendered":"CSS Elastic Layout using Ems"},"content":{"rendered":"

I’ve recently revamped my employer’s website, www.bauerbuiltmfg.com<\/a>, meaning I changed the look, design, and most photos of the site, but much of the typed content has been left untouched.<\/p>\n

This is the first website I’ve created with an “elastic layout,” which I got the idea from this excellent post: \u00a0The Incredible Em & Elastic Layouts with CSS<\/a>. \u00a0My elastic layout states the size of almost all elements (including images) in “ems”. \u00a0This is so that if someone resizes the webpage’s text, then the containers and images also change proportionally in size.<\/p>\n

Elastic Layout is important to me because in an era where one viewer may have a 800 x 600 pixel monitor, another may be viewing it on a wall-sized display via high-def projector. \u00a0I wanted a design that will render consistently across all displays (with the possible exception of mobile-phone browsers), and it seems that entering sizes in pixels or percentages presents other limitations.<\/p>\n

Tip:<\/span><\/strong> I created a simple spreadsheet with the formula from the Jon Tangerine article<\/a> that allows me to enter the pixel-size of images and get the em size out. \u00a0You can download it below.<\/span><\/p>\n

\n

Download “Pixels to Ems Calculator” by clicking here<\/a>.<\/span><\/strong><\/p>\n

\n
\"CSS<\/a>
CSS Elastic Layout web design using ems<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

Elastic Layout is important to me because in an era where one viewer may have a 800 x 600 pixel monitor, another may be viewing it on a wall-sized display via high-def projector. I wanted a design that will render consistently across all displays (with the possible exception of mobile-phone browsers), and it seems that entering sizes in pixels or percentages presents other limitations.<\/p>\n","protected":false},"author":1,"featured_media":528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[105],"class_list":["post-521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-web-design"],"aioseo_notices":[],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":105,"label":"web design"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2010\/11\/bauer-built-mfg-website-600x337.png",600,337,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":105,"name":"web design","slug":"web-design","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":19,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2010\/11\/bauer-built-mfg-website.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1NcZe-8p","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":0,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/528"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}