Mobile View

[00:00 - 00:15] In the previous lesson, you implemented the pagination and sorting feature for the events tables. In this lesson, you will learn how to make the website responsive, you are going to adapt the tables for mobile devices and made them scroll horizontally on our screens.

[00:16 - 00:29] You are going to update the events list component and its skeleton to fit mobile devices, and you are going to update the event item image size on mobile. The tables are a common way to display data on the web, but they can be challenging for mobile devices.

[00:30 - 00:43] There are three known approaches to optimizing tables for mobile devices. The first is adapting the tables for mobile, implementing an overflow scroll to manage white tables on our screens and ensure the tables are full width on mobile devices.

[00:44 - 00:51] The second one is reducing the number of columns. We can add less essential columns, for example the data and location, on mobile devices only.

[00:52 - 01:03] The third approach is the accordion tables converting the tables into accord ions on mobile devices. In this lesson, we will take the first approach, I think it provides the best user experience.

[01:04 - 01:20] Let's start with adding an horizontal scrolling to the table, navigate to the data table component. And we need to wrap it with another div that will have a max-width full and overflow scroll classness.

[01:21 - 01:34] Then, to the current container div, we want to add minimum width of 600 pixels. Now looking at the tables on the browser, they are looked the same.

[01:35 - 01:51] And looking at the mobile view, we can see that the user is now able to scroll the table since it's overflowing from the mobile device width, from the max-width of the page. And it can see all the details through the scrolling experience.

[01:52 - 01:58] Now one thing we can notice is the page lock padding on the sides on mobile. We can also see it on the timeline page.

[01:59 - 02:10] So going to the layout page, add a peaks for which is padding horizontal for on the x-axis. And for larger screens we don't need it because we have the max-width container .

[02:11 - 02:18] So looking back at my events page, it looks much better now. The next step is to update the event list component.

[02:19 - 02:21] Let's look at it. Right now it's a two-column grid layout.

[02:22 - 02:32] On mobile devices, we need to adapt it into one column layout. Let's start by changing the event list container div to have a column layout on MD and larger screens.

[02:33 - 02:53] Go to the event list component. And inside the div container of the section of the object entry, we want to add a MD flex row and MD gap 24, which is what we currently have.

[02:54 - 03:01] And we want to change the gap to 4 here and make it a flex column. Let's look at it again.

[03:02 - 03:08] We can see that it's much better now. You've added a flex-call class name to make it a single column layout.

[03:09 - 03:14] Now we want to hide the sideline on mobile devices. The sideline and the dot.

[03:15 - 03:18] Go back to the code. Go to the date separator.

[03:19 - 03:28] Add an hidden class and an MD block class. That means that on small screens, the component will be hidden.

[03:29 - 03:39] And on larger screens, it will have a block display. Do the same for the dot.

[03:40 - 03:50] And do the same in the skeleton as well. One thing we can see is that the image is a bit larger on mobile devices.

[03:51 - 04:00] Go to the event item component. Look at the container of the event image and add an MD prefix to the width 64 class name.

[04:01 - 04:08] Then add a width 32 class name. And the images should now fit the page.