{"id":4832,"date":"2017-12-15T05:49:27","date_gmt":"2017-12-15T05:49:27","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4832"},"modified":"2017-12-15T05:49:27","modified_gmt":"2017-12-15T05:49:27","slug":"activate-responsive-viewports-for-custom-layer-revolution-slider","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/activate-responsive-viewports-for-custom-layer-revolution-slider\/","title":{"rendered":"Activate Responsive Viewports for Custom Layer Revolution Slider"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\n
\n

1. Enable “Custom Grid Sizes” to create CSS Media Queries for your slider.<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Custom Grid Size: OFF =<\/strong>\u00a0The slider and all its content will simply scale (i.e. \u201czoom\u201d) in and out when the browser window is resized.<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Custom Grid Size: ON =<\/strong>\u00a0Creates\u00a0CSS Media Queries<\/a>, which allow you to resposition\/resize your content for that particular breakpoint.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\u00a0\"\"<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\u00a0\"\"<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
<\/div>\n<\/div>\n
<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

2. Make sure your content is always placed INSIDE the Layers Grid canvas.<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u00a0\u00a0\"\"<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\u00a0\"\"<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

3. Adjust the Responsive ALIGNMENT<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
GRID based =<\/strong>\u00a0The content will always be confined to the Layers Grid area.<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

SLIDE based =<\/strong>\u00a0The content will be positioned based on the entire size of the slider.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
\n
\n
\u00a0Not sure which option to use?<\/strong><\/div>\n
\n
\n
\n
\n
\n
\n
\n
    \n
  • \n
    Test both options on the\u00a0front-end\u00a0of your site to help make your decision.<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    4. Adjust the Responsive OFFSET<\/h4>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u00a0OFF =<\/strong>\u00a0The content\u2019s position will always honor the exact numbers you\u2019ve chosen for your X\/Y offsets\u00a0(#9-10 here).<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    ON =<\/strong>\u00a0The content\u2019s X\/Y offsets will be elastic.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    <\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \"\"<\/div>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
      \n
    • <\/i>\n
      Not sure which option to use?<\/strong>
      \nTest both options on the\u00a0front-end\u00a0of your site to help make your decision.<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n","protected":false},"excerpt":{"rendered":"

      1. Enable “Custom Grid Sizes” to create CSS Media Queries for your slider. Custom Grid Size: OFF =\u00a0The slider and all its content will simply scale (i.e. \u201czoom\u201d) in and out when the browser window is resized. Custom Grid Size: ON =\u00a0Creates\u00a0CSS Media Queries, which allow you to resposition\/resize your content for that particular breakpoint. […]<\/p>\n","protected":false},"author":1,"featured_media":4834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[4],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4832"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4832"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4832\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4834"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}