nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Web Reports Widget

Natashja Singleton

Hi,

How can I build the Web Report to reflect responsive in the Smart UI on different devices? I know the widgets itself resizes accordingly, however not the content in the Web Report.

So, on a large screen, the widgets (web reports) displays correctly, but on a laptop screen, for example, some of the content is cut off.

The client wants it to display equally correct in all screen sizes, so building it for a small screen (and have it look squashed on a large screen) is not the answer they want to hear.

Find more posts tagged with

Comments

Ferdinand Prantl

Do you use the full-page widget size? Then you could provide alternative styling for narrower screens, for example:

your selector {  styling for a wide screen}@media screen and (max-width: 1023px) {  your selector {    styling for a screen narrower than iPad landscape  }}

Natashja Singleton

Hi,

No, some Web Reports are in a double size Carousel and some are in a single size stand alone widget.

Neil_Myatt

It's up to the web developer to use standard CSS and HTML techniques to create responsive content for widgets. In general, you can do this by using relative widths and sizes rather than absolutes - i.e. % or rem versus px.

Top tip: you can usually get better responsive behavior if you use the browser's flexbox model. This allows you create content that stretches, shrinks or wraps depending on the real estate available. basically most DOM elements default to display: block, but you use display: flex instead, and then set various other options to control behavior. See link below...

Also CSS media queries allow different behavior at different screen sizes as Ferda mentioned.

It's not difficult - just takes some time to think for optimal UX at different screen sizes, and test at those screen sizes - usually best to start with the smallest and work upwards.

Some of the example WebReport templates have examples - e.g. by applying a bootstrap class to a table.

Here's a couple of useful links:

https://developers.google.com/web/fundamentals/design-and-ux/responsive/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/