Is it possible to set a UI composer for Desktop and a second for Mobile?
I have created 2 versions in the UI Composer, One I have set as standard throughout however it seems you can only set any other UI Composers per product
Best Answer
K
Ken Gamble
said
about 6 years ago
OK I have had an idea and this works.
(Wordpress, additional css files)
I have created some css that hides the majority of the elements when on a small screen (Mobile).
This then makes the editing screen alot easier for mobile users to use.
I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.
Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.
This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.
I have created some css that hides the majority of the elements when on a small screen (Mobile).
This then makes the editing screen alot easier for mobile users to use.
I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.
Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.
This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.
Ken Gamble
Is it possible to set a UI composer for Desktop and a second for Mobile?
I have created 2 versions in the UI Composer, One I have set as standard throughout however it seems you can only set any other UI Composers per product
OK I have had an idea and this works.
(Wordpress, additional css files)
I have created some css that hides the majority of the elements when on a small screen (Mobile).
This then makes the editing screen alot easier for mobile users to use.
I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.
Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.
This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.
Here is the css I have used.
@media (max-width: 568px) {
.fpd-tool-text-size{ display: none !important;}
.fpd-tool-text-line-height{ display: none !important;}
.fpd-tool-text-bold{ display: none !important;}
.fpd-tool-text-italic{ display: none !important;}
.fpd-tool-text-underline{ display: none !important;}
.fpd-tool-text-align{ display: none !important;}
.fpd-tool-text-stroke{ display: none !important;}
.fpd-tool-transform{ display: none !important;}
.fpd-tool-move-up{ display: none !important;}
.fpd-tool-move-down{ display: none !important;}
.fpd-align-left{ display: none !important;}
.fpd-align-top{ display: none !important;}
.fpd-align-right{ display: none !important;}
.fpd-align-bottom{ display: none !important;}
.fpd-text-font-tools{width: 100px;}
- Oldest First
- Popular
- Newest First
Sorted by Oldest FirstKen Gamble
OK I have had an idea and this works.
(Wordpress, additional css files)
I have created some css that hides the majority of the elements when on a small screen (Mobile).
This then makes the editing screen alot easier for mobile users to use.
I have also, using the UI Composer to hide the Text line height, Text align, Text stroke, Text Letter spacing and Text Transform within the Toolbar tab.
Just to make the screen on mobile a little easier, I have moved the Text Toolbar to the left hand side in front of the colour toolbar.
This is in the file productdesigner.php which is in the Assets, Templates folder in the FPD Plugin page.
Here is the css I have used.
@media (max-width: 568px) {
.fpd-tool-text-size{ display: none !important;}
.fpd-tool-text-line-height{ display: none !important;}
.fpd-tool-text-bold{ display: none !important;}
.fpd-tool-text-italic{ display: none !important;}
.fpd-tool-text-underline{ display: none !important;}
.fpd-tool-text-align{ display: none !important;}
.fpd-tool-text-stroke{ display: none !important;}
.fpd-tool-transform{ display: none !important;}
.fpd-tool-move-up{ display: none !important;}
.fpd-tool-move-down{ display: none !important;}
.fpd-align-left{ display: none !important;}
.fpd-align-top{ display: none !important;}
.fpd-align-right{ display: none !important;}
.fpd-align-bottom{ display: none !important;}
.fpd-text-font-tools{width: 100px;}
Sabrina Easley
Thank you Ken, I love this idea and I have added this code to my site. Thank you so much for sharing.
-
Adding Fancy Products to Categories
-
Shortcode for specfic product designer
-
What theme is recommended to use with FPD ?
-
Exclude Image from export
-
Google Font Family adds extras
-
Floating Dialog box
-
Uploadzone not working
-
Image transparency like in T-shirt demo
-
How do I get clipart
-
What does the LOAD button do / what is it for?
See all 2194 topics