Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
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 11 months ago
React Metronic
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)

M
Mehdi Hafid 11 months 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.


user
Lauris Stepanovs Author11 months 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


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  :(