I just have one day using Pico, looking for simplicity to build a WebApps light founda

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Any example about how to change fonts and spacing so forms and tables are not so big on PC screens? about pico HOT 4 CLOSED

picocss commented on May 21, 2024 1

Any example about how to change fonts and spacing so forms and tables are not so big on PC screens?

from pico.

Comments (4)

lucaslarroche commented on May 21, 2024

Hi @mcordova1967,

Thank you.
As all the sizes are relative to the "root element" (.rem), the quick - not so ellegant - trick is to override the responsive typography:

:root {
  --font-size: 16px;
}

The best way is to import Pico SASS library and recompile Pico with the "responsive flags" disabled:

$enable-responsive-spacings: false;
$enable-responsive-typography: false;
@import "pico";

from pico.

mcordova1967 commented on May 21, 2024

Thank you, I don't wanna lose the responsive features, just make the forms and tables a bit less bif in computer screens, they are responsive in cell phones, no problem, we like and need that. This overriding of values should go into a custom CSS? Regards, Martin

…

On Sat, Jan 1, 2022 at 1:27 AM Lucas Larroche ***@***.***> wrote: Hi @mcordova1967 <https://github.com/mcordova1967>, Thank you. As all the sizes are relative to the "root element" (.rem), the quick - not so ellegant - trick is to override the responsive typography: :root { --font-size: 16px; } The best way is to import Pico SASS library and recompile Pico with the "responsive flags" disabled: $enable-responsive-spacings: false;$enable-responsive-typography: ***@***.*** "pico"; — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW34RAGIYKM4YQT7RCX4VADUT2GFLANCNFSM5LCBMTJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

-- * Framework Dinámica Plataforma avanzada para desarrollo rápido de aplicaciones Web/SQL con Java EE y Eclipse http://www.martincordova.com * El BLOG de Dinámica: http://dinamicaframework.blogspot.com/ * El Canal de Dinámica en Youtube: http://www.youtube.com/dinamicaframework * Facebook https://www.facebook.com/FrameworkDinamica Martín Córdova y Asociados, C.A. J-31134803-4 / Caracas, Venezuela Cel: 58-424-2686639

from pico.

lucaslarroche commented on May 21, 2024

You can add some custom CSS styles after your CSS link to Pico and target only <table> and <form>:

<style>
form, table {
 --font-size: 16px;
}
</style>

That will disable the responsive typography only for the table and the form.
But it requires more tests; you might need more styles override.

from pico.

mcordova1967 commented on May 21, 2024

Thank you for the prompt reply, we will do some tests. We build mobile Apps with Apache Cordova for Banks mainly, and those Apps also run as WebApps for desktop, it is an approach we are happy with but I would like to simplify the front-end code and make it easier to manage for future projects, especially now that we are embracing C++ for the backend with a new JSON interface and the backend is running so fast, so far with Pico the resulting page code is much simpler, we need to make some tests of something responsive to see how it works on desktop and mobile. Question: Do you have some conditional style for table headers, so certain column won't be displayed if the screen is too small, I mean to make the table responsive to portrait or landscape on cellphones. I am attaching an image of the famous DataTable widget on a Pico page. Best regards and happy 2022, Martin www.martincordova.com

…

On Sat, Jan 1, 2022 at 2:07 AM Lucas Larroche ***@***.***> wrote: You can add some custom CSS styles after your CSS link to Pico and target only <table> and <form>: <style>form, table { --font-size: 16px; }</style> That will disable the responsive typography only for the table and the form. But it requires more tests; you might need more styles override. — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW34RABLLYVPU2ZEQCDKHZTUT2KZ5ANCNFSM5LCBMTJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

from pico.

Any example about how to change fonts and spacing so forms and tables are not so big on PC screens? about pico HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent