Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

React version of latest M8 sign in page style is broken


Hi I trying to move the code from M7 to 8 React version and found that that:
1. the style of sign in page is broken, this is what it looks like when play with the chrome window size: https://imgur.com/NVIkGl6 see how the background ended in the top and the text is displayed below.
2. equivalent html version is NOT broken: https://preview.keenthemes.com/metronic8/demo1/authentication/layouts/corporate/sign-in.html
3. you don't provide the actual sign in page you actually use in live preview, used here: https://preview.keenthemes.com/metronic8/react/demo1/auth which is the one I actually would like to use.

can you atleast fix the problem. it looks ugly.


M
Mehdi Hafid 1 year ago
Metronic React
2 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Lauris Stepanovs Author1 year ago

Hi Mehdi,

Thank you for your feedback.

Created a task to update Auth pages markup in our React version, we will try to release it in the next Metronic update.

The styles in our HTML version are the same as in our React version so you can just copy Auth page markup from the HTML version and reuse them in React version.

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


M
Mehdi Hafid 1 year ago

It is also not mobilie freindly the same way as the html version.
I copied the html code and replaced to work for react and it is displayed properly now.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(