-2

Scenario :

  • I am working on a mobile web version of my website

Problem :

  • When the design is running on my own laptop it looks perfect
    but when I put my HTML files and open on another laptop of my friend,
    the design is totally different and super messy.

    • For example:

      1. font-size is messed up.
      2. absolute positioned div is not at the position I set.
      3. sizes of input fields messed up.

  • The overall issue is that the UI design looks perfect on my screen
    but different on others, even with same screen width and resolutions.

Using : Bootstrap 4 to design the UI.


Open to all suggestions, Please suggest.
Thank you.

Abhishek Kumar
  • 2,501
  • 10
  • 25
nobody99
  • 145
  • 1
  • 2
  • 10
  • We'll need to see some code to help you, but have you eliminated the obvious issues like URIs referring to local directories that aren't present on the other machine. If you open up the console (`Control-Shift-I` or similar) do you see any errors? – Ken Y-N Sep 04 '18 at 03:18
  • the console does not show any errors. Because it is simple usage of basic html tags and bootstrap 4 classes, i did not expect the design to show differently on different devices. I saw something online stating the media queries and am wondering if that is the thing i've missed out in my css files. – nobody99 Sep 04 '18 at 03:20

1 Answers1

0

You might consider using something like Normalize.css or CSS Reset to minimize the difference between the default stylesheets on browsers and different operating systems. Stylesheets like these give your sites a consistent starting point, removing any custom styling which may be added by the browser publisher or computer maker.

Just add the stylesheet as the first <link> in the <head> of your index.html and it should give you a good starting point. There may be some display inconsistencies afterwards, due to hardware or operating system differences, so some minor tweaking may be necessary.

Neil T.
  • 3,308
  • 1
  • 25
  • 30