{"id":50,"date":"2016-03-23T22:37:27","date_gmt":"2016-03-23T22:37:27","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/test\/?p=50"},"modified":"2017-05-02T16:43:49","modified_gmt":"2017-05-02T16:43:49","slug":"html-figcaption-font-size-iphone-portrait","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/","title":{"rendered":"HTML figcaption size (width) too long &#8211; iPhone in portrait mode"},"content":{"rendered":"<h2>HTML figcaption size (width) too long &#8211; iPhone in portrait mode<\/h2>\r\n<p>I came across this issue when I was attempting to use an HTML <span class=\"white_space_pre\">&lt;figcaption&gt;<\/span> element underneath an image on an iPhone 5s using Safari and Chrome. In portrait view, the font size of the caption does not change, even if explicitly setting a font size in CSS to a size. This may be due to the fact that browsers on an iPhone will automatically increase the size of small text. See the initial HTML and CSS below.<\/p>\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\nfigcaption {\r\n\tfont-style: italic;\r\n        font-size: 0.5rem;\r\n\ttext-align: right;\r\n\tmargin-bottom: 25px;\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;figure&gt;\r\n  &lt;img src=\"http:\/\/image.jpg\" \/&gt;\r\n  &lt;figcaption&gt;Photograph courtesy of John Smith, \r\n    &lt;a href=\"http:\/\/www.website.com\"&gt;www.website.com&lt;\/a&gt;\r\n  &lt;\/figcaption&gt;\r\n&lt;\/figure&gt;\r\n<\/div>\r\n<\/pre>\r\n<p>With my font-size explicitly set to 0.5rem in CS, the figcaption pretty much takes up the entire width of page, when attempting to align it to the right at a smaller screen size in portrait mode.<\/p>\r\n<div id=\"attachment_53\" style=\"width: 235px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0333.jpg\" rel=\"attachment wp-att-53\" target=\"_blank\"><img aria-describedby=\"caption-attachment-53\" loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0333-169x300.jpg\" alt=\"In portrait view, the figcaption almost spans entire width of layout (not what we want).\" width=\"225\" height=\"400\" \/><\/a><p id=\"caption-attachment-53\" class=\"wp-caption-text\">In portrait mode, the figcaption almost spans entire width of layout (not what we want).<\/p><\/div>\r\n\r\n<p>The figcaption in the landscape version (aligned to right and font-size relative to layout) is the desired outcome.<\/p>\r\n<div id=\"attachment_57\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335.jpg\" rel=\"attachment wp-att-57\" target=\"_blank\"><img aria-describedby=\"caption-attachment-57\" loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335-300x169.jpg\" alt=\"In landscape view, the figcaption looks just the way we want it to.\" width=\"300\" height=\"169\" class=\"size-medium wp-image-57\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335-300x169.jpg 300w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335-768x433.jpg 768w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335-1024x577.jpg 1024w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335-650x366.jpg 650w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0335.jpg 1136w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-57\" class=\"wp-caption-text\">In landscape mode, the figcaption looks just the way we want it to.<\/p><\/div>\r\n\r\n<h2>Solution<\/h2>\r\n<p>It turns out that this happens because browsers on smartphones lays out the web page using a viewport that is wider than the device screen, unlike a desktop browser. Therefore using the -webkit-text-size-adjust property does the trick. After applying the property to our CSS, it should look like this below.<\/p>\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\nfigcaption {\r\n\tfont-style: italic;\r\n        font-size: 0.5rem;\r\n\ttext-align: right;\r\n\tmargin-bottom: 25px;\r\n        <b>-webkit-text-size-adjust: 100%;<\/b>\r\n}\r\n<\/div>\r\n<\/pre>\r\n<p>Be sure not to use &#8220;none&#8221; as the value for -webkit-text-size-adjust since it can affect how the text will be resized when using zoom in a browser. This would affect desktops as well. See the image below for how the figcaption now looks after adding this rule. <b>Click on the image to see a larger version<\/b>.<\/p>\r\n<div id=\"attachment_69\" style=\"width: 235px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0334.jpg\" rel=\"attachment wp-att-69\" target=\"_blank\"><img aria-describedby=\"caption-attachment-69\" loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0334-169x300.jpg\" alt=\"after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right\" width=\"225\" height=\"400\" \/><\/a><p id=\"caption-attachment-69\" class=\"wp-caption-text\">after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right<\/p><\/div>","protected":false},"excerpt":{"rendered":"HTML figcaption size (width) too long &#8211; iPhone in portrait mode I came across this issue when I was attempting to use an HTML &lt;figcaption&gt; element underneath an image on an iPhone 5s using Safari and Chrome. In portrait view, the font size of the caption does not change, even if explicitly setting a font [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,9,5,6,10,7,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML figcaption font size on iPhone portrait mode<\/title>\n<meta name=\"description\" content=\"Use -webkit-text-size-adjust to force the font size of an HTML figcaption element to change when an explicitly set font size does not work.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML figcaption font size on iPhone portrait mode\" \/>\n<meta property=\"og:description\" content=\"Use -webkit-text-size-adjust to force the font size of an HTML figcaption element to change when an explicitly set font size does not work.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-23T22:37:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-02T16:43:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0333-169x300.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0333-169x300.jpg\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/03\/IMG_0333-169x300.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/#webpage\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/\",\"name\":\"HTML figcaption font size on iPhone portrait mode\",\"isPartOf\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/#primaryimage\"},\"datePublished\":\"2016-03-23T22:37:27+00:00\",\"dateModified\":\"2017-05-02T16:43:49+00:00\",\"author\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Use -webkit-text-size-adjust to force the font size of an HTML figcaption element to change when an explicitly set font size does not work.\",\"breadcrumb\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/html-figcaption-font-size-iphone-portrait\/\",\"name\":\"HTML figcaption size (width) too long &#8211; iPhone in portrait mode\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-O","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/50"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":33,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/50\/revisions\/215"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}