My Website looks good only in my computer's screen

[TasosKhatzes]

From other device or replit webview my website looks horrible


https://replit.com/@TasosKhatzes/my-house?v=1

[prisems]

Can you present a screenshot of what it looks like for you?

[TasosKhatzes]

The navigation bar is not look right in small screen.

Here is looks good

[prisems]

I believe the issue is that your website is not mobile compatible, you need to make it so the website fits on smaller screens as it does on big screens. I’m not a CSS wizard so I can’t help you here exactly, but I’m sure someone else can.

[TasosKhatzes]

Okay! Thank you very much!

[robsd]

This page should help you create a responsive navigation bar with CSS…

CSS Horizontal Navigation Bar

[pro0grammer]

I was able to improve your site for medium-screen devices, for large devices you can add a break-point to change the selective properties per will.

Here are some tips as per changes I made:

1. Always use em or rem for font size.
2. Always make a wrapper and apply collective properties only to wrapper, Your html code was:

<div class="nav-bg"></div>
<div class="nav-links">...</div>
<img src="images/house-logo.png" class="logo">

Here’s the improved version of the code:

<div class="nav-wrapper">
  <img src="images/house-logo.png" class="logo">
  <div class="nav-links">...</div>
</div>

I applied background properties to nav-wrapper and removed nav-bg and position:fixed from other classes. nav-wrapper css:

  background-color: rgba(0,0,0,0.7);
  /*rgba uses an extra property `a` at the end(4th value) to set opacity and hence we removed opacity protperty*/
  width: 100%;
  height: 5%;
  position: fixed;
  top: 0px;
  left: 0%;
  justify-content: space-between;
  display:flex;

3. Instead of aligning each element seperately use wrapper to align the elements. For ex. I replaced properties like top:1%; right:25%; with margin-top:1%; right:1em; and instead I added justify-content: space-between and display:flex to wrapper.

4. I also saw that you had large gaps between links, so I changed margin-left: 20% in links to margin-left: 2%. If you want margin-left:20% on large devices, add a break-point using media-queries in css.

5. Added width: 100% to nav-links wrapper so that links can properly fit in space; Changed height: 5% in .logo to height:100% since now height was relative to nav-wrapper which was already set to height:5%.

Here’s the final result:
https://replit.com/@abncodes/Shoinias-House

You might’ve encountered unfamiliar properties in my explanation, I recommend to look them up on w3schools.com.

Note: I made mobile first approach here, where I designed the site for medium/mobile devices first and asked you to add breakpoints for larger screens. You can inverse the technique used here as per your convenience.

IMPORTANT
You can also add a break-point for mobile devices so that nav looks good on mobile too but it’s not recommended. I instead recommend to totally hide this navbar on mobile and code a different one similar to this: