{"id":339,"date":"2018-09-25T05:59:34","date_gmt":"2018-09-25T05:59:34","guid":{"rendered":"http:\/\/loftocean.com\/doc\/loftloader\/?page_id=339"},"modified":"2020-07-23T00:18:18","modified_gmt":"2020-07-23T00:18:18","slug":"max-width-for-responsive-design","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/loader\/max-width-for-responsive-design\/","title":{"rendered":"Max Width for Responsive Design"},"content":{"rendered":"<p>When you choose one of the following <strong>Loader Animations<\/strong> for your preloader, you will see the &#8220;<strong>Max Width for Responsive Design<\/strong>&#8221; option.<\/p>\n<ul>\n<li>Custom Image Loading<\/li>\n<li>Custom Image Rotating<\/li>\n<li>Custom Image Bouncing<\/li>\n<li>Custom Static Image<\/li>\n<li>Custom Image Fading<\/li>\n<\/ul>\n<p>By changing the value of this option, you can set the maximum width of the custom image width.  <\/p>\n<p>For example, you set the <strong>Image Width<\/strong> of the custom image to 800 pixels, and when the browser width is 800 pixels or more, the image\u2019s width will be 800 pixels. When the browser screen width is less than 800 pixels, the image will take up the full width of the screen without any left or right space. If you\u2019d like to leave some space around the image on a smaller screen, you can set the max width value to less than 100%, such as 80%. Then this custom image will only take up 80% of browser width at the most.<\/p>\n<p>Let&#8217;s explain this setting with an example:<\/p>\n<p>On desktop devices, we&#8217;d like to limit the logo image width to 280px.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/loader-width.png\" alt=\"\" width=\"2560\" height=\"1384\" class=\"aligncenter size-full wp-image-343\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/loader-width.png 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/loader-width-300x162.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/loader-width-768x415.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/loader-width-1024x554.png 1024w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>Then click on the <strong>&#8220;Device Preview &#8211; Mobile&#8221;<\/strong> button to switch to the preview for phone-sized devices:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/device-preview-mobile.png\" alt=\"\" width=\"2560\" height=\"1384\" class=\"aligncenter size-full wp-image-342\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/device-preview-mobile.png 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/device-preview-mobile-300x162.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/device-preview-mobile-768x415.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/device-preview-mobile-1024x554.png 1024w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>Since the value of <strong>&#8220;Max Width for Responsive Design&#8221;<\/strong> is <strong>&#8220;100%&#8221;<\/strong>, which means that the maximum width of the logo image can be <strong>100% of the screen width<\/strong>. As the <strong>Device Preview Size<\/strong> of the mobile version is set to 320px x 480px, the logo image width on mobile devices is still 280px.<\/p>\n<p>If you&#8217;d like to make the logo image smaller on mobile devices, you can reduce the <strong>&#8220;Max Width for Responsive Design&#8221;<\/strong> value, for example, change it to <strong>&#8220;60%&#8221;<\/strong>. Then the logo will look like this in the preview area:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/set-loader-max-width.png\" alt=\"\" width=\"2560\" height=\"1384\" class=\"aligncenter size-full wp-image-341\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/set-loader-max-width.png 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/set-loader-max-width-300x162.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/set-loader-max-width-768x415.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/set-loader-max-width-1024x554.png 1024w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>Then you can switch back to &#8220;<strong>Desktop Preview<\/strong>&#8220;. Usually the desktop devices have a screen resolution of 1024&#215;768 pixels or higher (<a href=\"https:\/\/www.w3schools.com\/browsers\/browsers_display.asp\" rel=\"noopener noreferrer\" target=\"_blank\">Screen Resolution Statistics<\/a>), the maximum width of the logo image is at least: 1024 x 0.6 = 614.4 pixels. It is greater than the &#8220;<strong>Image Width<\/strong>&#8221; value we set (280px), so the logo image width on desktop devices is still 280px.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/desktop-preview.png\" alt=\"\" width=\"2560\" height=\"1384\" class=\"aligncenter size-full wp-image-340\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/desktop-preview.png 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/desktop-preview-300x162.png 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/desktop-preview-768x415.png 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2018\/09\/desktop-preview-1024x554.png 1024w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you choose one of the following Loader Animations for your preloader, you will see the &#8220;Max Width for Responsive Design&#8221; option. Custom Image Loading Custom Image Rotating Custom Image Bouncing Custom Static Image Custom Image Fading By changing the value of this option, you can set the maximum width of the custom image width. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":73,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-339","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/339\/revisions"}],"predecessor-version":[{"id":685,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/339\/revisions\/685"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/73"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}