creativetimofficial / ct-material-kit-pro-react

React version of Material Kit Pro
39 stars 12 forks source link

[Bug] Error page (404) not fully mobile compatible #78

Closed rickstaa closed 3 years ago

rickstaa commented 3 years ago

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-kit-pro-react/#/error-page

Operating System

Ubuntu 20.04, windows 10

Device

Hp Zbook G5

Browser & Version

Chrome v8.0.4324.150, firefox v85.0.1

Steps to reproduce

  1. Go to the error-page.
  2. Open the firefox or chrome mobile view.
  3. Set the device type to a small device (Ipone X, 6, 7 etc.)
  4. See that the title is too big for the page.

What is expected?

I would expect the title to fit the screen.

What is actually happening?

It overflows to the right.


Solution

I would have expected that the typography was implemented using media Queries or by using material-ui's responsive typography.

einazare commented 3 years ago

Hello there, @rickstaa ,

Please go inside src/assets/jss/material-kit-pro-react/views/errorPageStyles.js and after line 23, add the following:

    "@media (max-width: 600px)": {
      fontSize: "7em"
    },

We''ll add the above in our next update as well.

Best, Manu

rickstaa commented 3 years ago

@EINazare Great thanks for the fix! I used the following in my project:

const errorPageStyle = (theme) => ({
...
theme.breakpoints.down("sm"):{
    fontSize: "7em"
}
...
}

Feel free to close the issue now or keep it open till the next release.