{"id":101,"date":"2021-03-29T21:21:40","date_gmt":"2021-03-29T21:21:40","guid":{"rendered":"https:\/\/imagify.io\/documentation\/?p=101"},"modified":"2024-03-07T06:25:10","modified_gmt":"2024-03-07T06:25:10","slug":"images-not-aligned-webp","status":"publish","type":"post","link":"https:\/\/imagify.io\/documentation\/images-not-aligned-webp\/","title":{"rendered":"My images are not aligned after activating Next-Gen formats"},"content":{"rendered":"\n<p>Layout issues can sometimes be caused by Imagify&#8217;s &#8220;Use &lt;picture&gt; tags&#8221; option for displaying Next-Gen images. This option swaps out your page&#8217;s &lt;img&gt; tags for &lt;picture&gt; tags in order to provide fallback support for users of Apple Safari browsers (they don&#8217;t fully support Next-Gen images yet).<\/p>\n\n\n\n<p>If you find your images are out of alignment after being optimized, you can try adding the following CSS code to your Custom CSS field in Appearance &gt; Customize page in your WP Admin or in your theme&#8217;s style.css:<\/p>\n\n\n<div class=\"wp-block-wab-pastacode\">\n\t<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.aligncenter {<br\/>\u00a0\u00a0text-align: center;<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/div>\n\n\n\n<p>However, each situation is unique, and if the above code does not work for you, then it&#8217;s possible a more customized solution may be needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Layout issues can sometimes be caused by Imagify&#8217;s &#8220;Use &lt;picture&gt; tags&#8221; option for displaying Next-Gen images. This option swaps out your page&#8217;s &lt;img&gt; tags for &lt;picture&gt; tags in order to provide fallback support for users of Apple Safari browsers (they don&#8217;t fully support Next-Gen images yet). If you find your images are out of alignment [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[23,22],"class_list":["post-101","post","type-post","status-publish","format-standard","hentry","category-webp","tag-broken-layout","tag-webp"],"_links":{"self":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":7,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":1002,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/posts\/101\/revisions\/1002"}],"wp:attachment":[{"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/media?parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/categories?post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imagify.io\/documentation\/wp-json\/wp\/v2\/tags?post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}