How can I configure separate mobile and desktop pages with different CSS styling?

I want users on mobile to see a page notifying them to use a desktop browser instead.

How can I configure distinct CSS styling for my mobile and desktop pages separately?

Comments

  • You can achieve this by creating your mobile and desktop pages, designing and applying specific CSS to each, then adding them to your folder with one set to display for mobile only and the other set to desktop.


    Begin by uploading your CSS file to Decisions. Click the gear icon to go to System, then Designers > CSS, and click 'Add' to title and upload your CSS documents for your pages.


    Next create and design your pages, then in the page designer for each, open the properties panel and under 'STYLE', select your specific CSS file for that page from the 'Style Sheets' list.


    Save and close, then right click the folder you'd like to add your mobile and desktop pages to, go to Manage > Page/Dashboard > Add Page/Dashboard.


    Click 'PICK PAGE' and select one of the pages you want to add, then click 'EDIT' to the right of 'ADVANCED' to open advanced settings, then under 'Display Platforms' check which platforms you want this page to be displayed for.

    Click 'DONE' and 'SAVE', then repeat for your other pages.


    Once you've finished making your selections, either clear your browser's cache and refresh the page, or open it in an incognito window, so that it's refreshed with your new CSS.


    The pages you've configured will be displayed only on the platforms selected for each of them with their own distinct styling.


    Please see the below documentation pages for more information on uploading CSS and using it with pages:

    https://documentation.decisions.com/docs/using-css-page

    https://documentation.decisions.com/docs/uploading-css

Sign In or Register to comment.