http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post Support Forum - Topic: Placing an Image on a Page (not a Blog Post) en-US Sat, 18 May 2013 23:53:22 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-62674 Thu, 28 Jun 2012 17:33:11 +0000 Devin 62674@http://www.kriesi.at/support/ <p>Hi outtacontext,</p> <p>Glad that is working for you. What its doing is forcing the class that link has gets a forced width so that it overrides any other width associated with the image. Using max-width defines that maximum size and then using a percentage so its liquid and adjusts.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-62017 Mon, 25 Jun 2012 11:21:06 +0000 outtacontext 62017@http://www.kriesi.at/support/ <p>Dude, it worked!!! Thank you very much.</p> <p>Now, can you tell me <strong>why</strong> it's working? I'd like to understand all of this. Thx. </p> http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-61992 Mon, 25 Jun 2012 07:27:24 +0000 Dude 61992@http://www.kriesi.at/support/ <p>Hi! </p> <p> Try to add following code to css/custom.css:<br /> <pre><code>a.nounderline{ max-width: 100% !important; }</code></pre> <p> Best regards,<br /> Peter </p> http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-61908 Sun, 24 Jun 2012 11:55:35 +0000 outtacontext 61908@http://www.kriesi.at/support/ <p>This is working. Thanks. </p> <p>But it brings up another problem. My old blog, which I imported into WP and this theme has a number of blog images that run the width of the old blog's content area (530 pixels wide). When I reduce the size of the window these images overflow into the right column. The two widest viewports work fine (the content area is wide enough to hold the 530px wide images). </p> <p>How can I fix that so these wide images will downsize nicely? For an example take a look at the image within this blog post: <a href="http://www.outtacontext.com/wp2/2011/12/10/i_used_to_say_b/" rel="nofollow">http://www.outtacontext.com/wp2/2011/12/10/i_used_to_say_b/</a></p> <p>In this example I have an image within a div. The style of the div is this:<br /> <pre><code>#main div.image_center {margin-bottom: 12px; width: 100%; }</code></pre> <p>The image tag has no height or width stated in the code and the style on it is from your base.css that has max-width: 100%. Can you tell me why this isn't resizing after the two larger viewports?</p> <p>Thx. </p> http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-61864 Sat, 23 Jun 2012 17:37:09 +0000 Dude 61864@http://www.kriesi.at/support/ <p>You need to use a percentage value instead of a pixel value. Eg use:<br /> <pre><code>&lt;div style=&quot;margin-top: 7px; float: right; margin-bottom: 12px; margin-left: 9px; width: 100%;&quot;&gt; &lt;img src=&quot;http://outtacontext.com/life/images/.jpg&quot; width=&quot;300&quot; height=&quot;&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;</code></pre> <p>to cover the entire content element width or decrease the percentage value if you want to float the text around the image. </p> http://www.kriesi.at/support/topic/placing-an-image-on-a-page-not-a-blog-post#post-61858 Sat, 23 Jun 2012 15:24:55 +0000 outtacontext 61858@http://www.kriesi.at/support/ <p>I have a series of articles I've written and am publishing them as pages. I would like to add an image with a caption to them and am wondering what is the best way to do that. I usually use this inline css:</p> <pre><code>&lt;div style=&quot;margin-top: 7px; float: right; margin-bottom: 12px; margin-left: 9px; width: 300px;&quot;&gt;&lt;img src=&quot;http://outtacontext.com/life/images/.jpg&quot; width=&quot;300&quot; height=&quot;&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt; &lt;p class=&quot;preface&quot; style=&quot;margin-top: 10px; text-align: center;&quot;&gt;&lt;/p&gt; &lt;/div&gt;</code></pre> <p>But, I want the image to scale for different size screens. One way I thought of doing it is to create a custom css (rather than inline) and simply don't stipulate the image size. </p> <p>What is your recommendation for doing this so the image will resize in the responsive web design?<br /> Thanks. </p>