Tumblr Photo Size, check it... |
Tumblr Photo Size, check it... |
waymon |
Jul 23 2010, 08:15 PM
Post
#1
|
Group: Members Posts: 4 Joined: 23-July 10 Member No.: 12,360 |
Hello,
I recently started up a tumblr and have been having some trouble tweaking one little thing. When I post a photo it doesn't post to the size of the column, it posts quite smaller. I'm afraid its going to be something really easy when someone points it out, and ill be foolish. The code is below, id appreciate any suggestions. :-D kaymark1.tumblr.com thanks! CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- DEFAULT COLORS --> <meta name="color:Background" content="#344353"/> <meta name="color:Content Background" content="#344353"/> <meta name="color:Header Background" content="#344353"/> <meta name="color:Title" content="#DEE8F3"/> <meta name="color:Description" content="#6F869E"/> <meta name="color:Date" content="#4B5C6D"/> <meta name="color:Post Title" content="#DEE8F3"/> <meta name="color:Text" content="#6F869E"/> <meta name="color:Inline Link" content="#6F869E"/> <meta name="color:Quote" content="#B8C8DA"/> <meta name="color:Quote Source" content="#DEE8F3"/> <meta name="color:Link Post" content="#B8C8DA"/> <meta name="color:Media Background" content="#4B5C6D"/> <!-- END DEFAULT COLORS --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <link rel="icon" href="{Favicon}"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> <meta name="viewport" content="width=675"/> <!-- iPhone --> <style type="text/css"> body { color: {color:Text}; margin: 30px; background-color: {color:Background}; font-family: Helvetica, sans-serif; } #content { width: 720px; margin: auto; padding: 35px; background-color: {color:Content Background}; } a { color: {color:Inline Link}; } h1 { padding: 0px; margin: 0px; font: Bold 4.5em Helvetica, sans-serif; line-height: .9em; letter-spacing: -1px; text-transform: uppercase; } h1 a { color: {color:Title}; text-decoration: none; } div#header { background-color: {color:Header Background}; margin: 0; width: 100%; /* padding: 20px 30px 10px 30px; */ } div#description { font-size: 12px; font-weight: bold; font-style: italic; text-transform: lowercase; margin-top: 10px; color: {color:Description}; } div#description a { color: {color:Description}; } div#search { text-align: right; float: right; margin: 10px 0 0; } .date { font: Italic 11px Georgia, Helvetica, sans-serif; color: {color:Date}; line-height: 38px; height: 28px; padding-top: 7px; padding-bottom: 0px; border-bottom: dotted 1px {color:Date}; margin-bottom: 10px; text-transform: lowercase; } .date a { text-decoration: none; color: {color:Date}; } .post { margin-bottom: 40px; position: relative; } .post h2 { font-weight: Normal; font-style: italic; font-size: 30px; font-family: Georgia, times, serif; letter-spacing: -.67px; color: {color:Post Title}; margin: 0px 0px 10px 0px; } .post h2 a { color: {color:Post Title}; text-decoration: none; } /* Regular Post */ .post .regular { font-size: 24px; line-height: 23px; } .post .regular img { max-width: 100%; } .post .regular blockquote { font-style: italic; } /* Photo Post */ .post .photo { background-color: {color:Media Background}; padding: 10px; } .post .photo img { max-width: 100%; border: none; } .post .photo .caption { color: {color:Title}; font-size: 24px; margin-top: 17px; } .post .photo .caption a { color: {color:Title}; } /* Quote Post */ .post div.quote { padding: 0; } .post div.quote span.quote { font-size: 28px; letter-spacing: -1px; color: {color:Quote}; } .post div.quote span.quote a { color: {color:Quote}; } .post div.quote span.quote big.quote { font-weight: bold; font-size: 60px; line-height: 0px; vertical-align: -28px; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); display: none; } .post div.quote .source { font-size: 16px; color: {color:Quote Source}; } .post div.quote .source a { color: {color:Quote Source}; } /* Link Post */ .post .link a.link { font: Italic 30px Georgia, Helvetica, sans-serif; letter-spacing: -.67px; color: #B6C6D8; text-decoration: none; line-height: 1.1em; } .post .link a.link:hover { color: {color:Title}; } .post .link .description { font-weight: normal; font-size: 13px; margin-top: 5px; } /* Conversation Post */ .post .conversation ul { list-style-type: none; margin: 0px 0px 5px 0px; padding: 1px; } .post .conversation ul li { font-size: 13px; color: {color:Text}; line-height: 17px; } .post .conversation ul li span.label { font-weight: bold; } /* Audio Post */ .post .audio .caption { margin-top: 5px; font-size: 11px; color: {color:Text}; } .post .audio .caption a { color: {color:Text}; } /* Video Post */ .post .video { width: 400px; margin: auto; padding: 10px; background-color: {color:Media Background}; } .post .video .caption { margin-top: 15px; font-size: 13px; line-height: 17px; color: {color:Title}; } .post .video .caption a { color: {color:Title}; } /* Footer */ #footer { margin: 20px 0px 0px 0px; font-size: 18px; } #footer a { text-decoration: none; color: {color:Text}; } #footer a:hover { text-decoration: underline; } #footer p.tiny { font-size: 11px; float: left; } #footer p.tiny a { text-decoration: none; color: {color:Text}; font-weight: bold; } #footer p.tiny .dim { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } ol.notes { padding: 0px; margin: 25px 0px; list-style-type: none; font-size: .75em; background-color:{color:Photo Background}; color: {color:Text}; } ol.notes li.note { padding: 3px 7px 3px 7px; } ol.notes li.note a { color: {color:Title}; text-decoration: none; } ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; } ol.notes li.note a img.avatar { border: none; } ol.notes li.note span.action { font-weight: normal; } ol.notes li.note .answer_content { font-weight: normal; } ol.notes li.note blockquote { padding: 4px 10px; margin: 10px 0px 0px 25px; } ol.notes li.note blockquote a { text-decoration: none; } .searchresultcount { text-align: center; |
Darin McGrew |
Jul 24 2010, 12:52 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
AFAICS, the div#content element is 720px wide. And the div#post elements are 720px wide. And the div#photo elements are 700px wide plus 20px of padding (10px on each side).
The images are all 400px wide, because that's the size of the image files, and you haven't done anything to change that. (BTW, don't resize the photos with HTML or CSS. Instead, resize them on the server, and have the HTML and CSS display them in their actual size.) |
Lo-Fi Version | Time is now: 24th April 2024 - 05:22 AM |