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
0 Votes
K
Ken Gamble posted
about 6 years ago
Best Answer
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.
Thank you Ken, I love this idea and I have added this code to my site. Thank you so much for sharing.
0 Votes
K
Ken Gambleposted
about 6 years ago
Answer
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.
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
0 Votes
Ken Gamble posted about 6 years ago Best Answer
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;}
0 Votes
2 Comments
Sabrina Easley posted over 5 years ago
Thank you Ken, I love this idea and I have added this code to my site. Thank you so much for sharing.
0 Votes
Ken Gamble posted about 6 years ago Answer
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;}
0 Votes
Login or Sign up to post a comment