{"id":1873,"date":"2026-04-01T14:40:19","date_gmt":"2026-04-01T14:40:19","guid":{"rendered":"https:\/\/onesystemcrm.com\/help\/?post_type=docs&p=1873"},"modified":"2026-04-01T14:40:19","modified_gmt":"2026-04-01T14:40:19","password":"","slug":"advanced-image-settings-for-mobile-desktop-view","status":"publish","type":"docs","link":"https:\/\/onesystemcrm.com\/help\/Supports\/advanced-image-settings-for-mobile-desktop-view\/","title":{"rendered":"Advanced Image Settings for Mobile & Desktop View"},"content":{"rendered":"

What Are Image Dimensions Settings?<\/strong><\/h1>\n

Image dimension settings allow you to adjust image dimensions independently for mobile and desktop views. You can specify height and width for images in mobile layouts, ensuring that visuals look sharp and consistent across devices.<\/p>\n

It also supports multiple units for measurement, including\u00a0pixels (px),\u00a0relative units (rem, em), and\u00a0percentages (%), for greater design flexibility.<\/p>\n

<\/p>\n

\n

Why Are Image Dimension Settings Important?<\/strong><\/h1>\n
    \n
  • Enhanced Responsiveness:\u00a0<\/strong>Ensure images adapt seamlessly to different screen sizes, improving user experience.<\/li>\n
  • Improved SEO Performance:<\/strong>\u00a0Optimizing image sizes for mobile and desktop views can boost your\u00a0CLS (Cumulative Layout Shift)\u00a0and\u00a0PageSpeed scores, key factors for SEO rankings.<\/li>\n
  • Design Flexibility:<\/strong>\u00a0Customize image dimensions using different units to match your specific design needs.<\/li>\n<\/ul>\n

    <\/p>\n

    \n

    How to Use Image Dimensions Settings<\/strong><\/h1>\n

    Step 1:\u00a0<\/strong>Open the Funnel or Website Builder<\/u><\/h3>\n
      \n
    • Navigate to your Funnel or Website Builder in the OneSystemCRM dashboard.<\/li>\n
    • Select the page containing the image you wish to edit.<\/li>\n<\/ul>\n

      <\/p>\n

      Step 2:\u00a0<\/strong>Access Image Settings<\/u><\/h3>\n
        \n
      • Click on the image to open its settings panel.<\/li>\n
      • Toggle to\u00a0Mobile View<\/strong>\u00a0or\u00a0Desktop View<\/strong>\u00a0using the preview toggle.<\/li>\n<\/ul>\n

        <\/p>\n

        Step 3:<\/strong>\u00a0Adjust Image Dimensions<\/u><\/h3>\n
          \n
        • In the image settings panel, locate the\u00a0Height<\/strong>\u00a0and\u00a0Width<\/strong>\u00a0fields.<\/li>\n
        • Enter the desired values for the image dimensions.<\/li>\n
        • Select your preferred unit of measurement:\n
            \n
          • px<\/strong>\u00a0for fixed pixel dimensions.<\/li>\n
          • rem<\/strong>\u00a0or\u00a0em<\/strong>\u00a0for scalable dimensions relative to font size.<\/li>\n
          • %<\/strong>\u00a0for relative dimensions based on container size.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

             <\/p>\n

            Note:<\/strong><\/span>\u00a0To set different image dimensions for mobile and desktop, use the view toggle at the top of the builder to switch between views. Enter height and width values while in each specific view\u2014changes made in mobile view apply only to mobile, and those made in desktop view apply only to desktop. This allows you to optimize image sizing separately for each device.<\/pre>\n
             <\/p>\n
             <\/p>\n
            <\/p>\n
            Step 4:<\/strong>\u00a0Save and Preview<\/u><\/h3>\n
              \n
            • Save your changes and preview your design in both mobile and desktop views to ensure responsiveness.<\/li>\n<\/ul>\n
              \n
              Frequently Asked Questions<\/strong><\/h1>\n
              Q: What happens if I don\u2019t set specific dimensions for mobile views?<\/strong><\/p>\n
              If you don\u2019t specify mobile dimensions, the image will use the desktop dimensions by default, which may not be optimized for smaller screens.<\/p>\n
              Q: How do I choose the best unit for image dimensions?<\/strong><\/p>\n
                \n
              • Use\u00a0px<\/strong>\u00a0for precise, fixed dimensions.<\/li>\n
              • Use\u00a0rem<\/strong>\u00a0or\u00a0em<\/strong>\u00a0for scalable designs relative to text size.<\/li>\n
              • Use\u00a0%<\/strong>\u00a0for dimensions that scale with the size of the image\u2019s container.<\/li>\n<\/ul>\n
                Q: Can I use different units for height and width?<\/strong><\/p>\n
                Yes, you can mix and match units for height and width. For example, set the height in\u00a0pixels (px)<\/strong>\u00a0and the width in\u00a0percentages (%)<\/strong>\u00a0based on your design needs.<\/p>\n
                Q: Will this feature affect my existing images?<\/strong><\/p>\n
                No, existing images will retain their current dimensions unless you modify them. You can adjust the dimensions for individual images as needed.<\/p>\n
                Q: Can I test CLS and PageSpeed improvements after making changes?<\/strong><\/p>\n
                Yes, tools like\u00a0Google PageSpeed Insights<\/strong>\u00a0and\u00a0Lighthouse<\/strong>\u00a0can help you measure CLS and PageSpeed scores to evaluate the impact of your optimizations.<\/p>\n
                Q: Is this feature available for all OneSystemCRM users?<\/strong><\/p>\n
                Yes, this feature is available across all OneSystemCRM accounts with access to the Funnel or Website Builder.<\/p>\n","protected":false},"excerpt":{"rendered":"
                What Are Image Dimensions Settings? Image dimension settings allow you to adjust image dimensions independently for mobile and desktop views. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[86],"doc_tag":[],"class_list":["post-1873","docs","type-docs","status-publish","hentry","doc_category-funnels-and-websites"],"year_month":"2026-07","word_count":525,"total_views":"18","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"usamasaeed219","author_nicename":"usamasaeed219","author_url":"https:\/\/onesystemcrm.com\/help\/author\/usamasaeed219\/"},"doc_category_info":[{"term_name":"Funnels and Websites","term_url":"https:\/\/onesystemcrm.com\/help\/Supports-category\/funnels-and-websites\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/comments?post=1873"}],"version-history":[{"count":1,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1873\/revisions"}],"predecessor-version":[{"id":1874,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/docs\/1873\/revisions\/1874"}],"wp:attachment":[{"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/media?parent=1873"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_category?post=1873"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/onesystemcrm.com\/help\/wp-json\/wp\/v2\/doc_tag?post=1873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}