{"id":934473,"date":"2015-01-18T18:18:31","date_gmt":"2015-01-19T02:18:31","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/"},"modified":"2015-07-07T06:31:14","modified_gmt":"2015-07-07T13:31:14","slug":"featured-image-responsive","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/","title":{"rendered":"Featured Image Responsive"},"content":{"rendered":"

Hi,<\/p>\n

I recently had a question of mine answered pertaining to making the featured image clickable to view the full size version. I did that successfully but I now have a different issue.<\/p>\n

I want to wrap a paragraph around the image. So, my method has been to see the size of the image, and then set the width of the paragraph to the difference. For example, an image is 240px, the default width of the page is 1000px, so I set the width of the paragraph to 76%.<\/p>\n

This works on displays with widths above 1000px, but on iPads for instance, the paragraph gets shifted below the image because the width of the display was reduced to 800px. I don’t have to worry about phones because I set the media query for them to make the width of the paragraph 100% because the featured image in my mobile theme is also 100% width<\/p>\n

An example of this on my site is here: www.revrepublic.co\/event\/5-diner-friday-night-drags\/2015-01-23\/<\/p>\n

My question then is, is there a way to assign a class to the featured image so I can set a max-width? Or is there a better method altogether?<\/p>\n

Thanks,
\nJohn<\/p>\n","protected":false},"template":"","class_list":["post-934473","topic","type-topic","status-closed","hentry"],"yoast_head":"\nFeatured Image Responsive -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Featured Image Responsive -\" \/>\n<meta property=\"og:description\" content=\"Hi, I recently had a question of mine answered pertaining to making the featured image clickable to view the full size version. I did that successfully but I now have a different issue. I want to wrap a paragraph around the image. So, my method has been to see the size of the image, and […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-07T13:31:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/\",\"name\":\"Featured Image Responsive -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2015-01-19T02:18:31+00:00\",\"dateModified\":\"2015-07-07T13:31:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Featured Image Responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Featured Image Responsive -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/","og_locale":"en_US","og_type":"article","og_title":"Featured Image Responsive -","og_description":"Hi, I recently had a question of mine answered pertaining to making the featured image clickable to view the full size version. I did that successfully but I now have a different issue. I want to wrap a paragraph around the image. So, my method has been to see the size of the image, and […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/","article_modified_time":"2015-07-07T13:31:14+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/","name":"Featured Image Responsive -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2015-01-19T02:18:31+00:00","dateModified":"2015-07-07T13:31:14+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/featured-image-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"Featured Image Responsive"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/934473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":2,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/934473\/revisions"}],"predecessor-version":[{"id":934906,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/934473\/revisions\/934906"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=934473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}