CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 275

Scaling and keeping proportions

I'm trying to learn HTML/CSS and working on a nav bar, however, I am experiencing a scaling problem. This is the website in full screen.Fullscreen image

This is the website minimized a bit. Minimized a bit

Then this is the website minimized all the way. Minimized a bit

As you can tell when I scale the website around into different scales then the proportions mess up and things begin to overlap. I have tried making the children absolute while keeping the containers relative. I am also using em's for measurement and not using pixels. What can I do to keep everything proportional while scaling?

This is the js fiddle https://jsfiddle.net/2w1r136j/2/

HTML

<div class="container">
  <header>
    <nav>
      <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
      <div class="leftNavContainer">
        <a href="#">Home</a>
        <a href="#">Story</a>
      </div>
      <div class="rightNavContainer">
        <a href="#">Characters</a>
        <a href="#">Create</a>
      </div>
    </nav>
  </header>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-size: 1em;
}

.container {
  width: 100%;
  height: 100%;
  position: absolute;
}

header {
  background: white;
  height: 3.5em;
}

.logo {
  height: 4.5em;
  width: 4.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;  /* 50% of your logo width */
  display: block;
  margin-top: 0;
}

.leftNavContainer {
  position: absolute;
  float: left;
}

.leftNavContainer a {
  position: relative;
  display: inline;
  margin-right: 2em;
  margin-left: 2em;
}

.rightNavContainer {
  float: right;
}

.rightNavContainer a {
  position: relative;
  display: inline;
  margin-right: 2em;
  margin-left: 2em;
}

Upvotes: 0

Views: 58

Answers (2)

Sean Gregory
Sean Gregory

Reputation: 621

You can use media queries to change sizes at breakpoints ex: 

@media only screen and (max-width: 600px) {
    body {
        font-size: .7em;

    }
}

https://jsfiddle.net/2w1r136j/7/

However, you might consider using the media queries to incorporate a responsive design which will work for mobile. A common idiom is to collapse the menu items into full width elements, and to bump up the font size.

something like: https://jsfiddle.net/2w1r136j/40/

Upvotes: 1

Shobhit Chittora
Shobhit Chittora

Reputation: 1279

Well Media queries might work, but a much better implementation would be using Flexbox or better CSS Grid. I've updated the fiddle with a flexbox implementation.

https://jsfiddle.net/khpv2azq/3/

HTML 

<head>
  <title>
    Westworld
  </title>
  <link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
  <header>
    <nav>
      <div class="leftNavContainer">
        <a href="#">Home</a>
        <a href="#">Story</a>
      </div>
       <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
      <div class="rightNavContainer">
        <a href="#">Characters</a>
        <a href="#">Create</a>
      </div>
    </nav>
  </header>
</div>

CSS 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-size: 1em;
}

nav{
  display: flex;
  justify-content: space-between;
}

.container {
  width: 100%;
  height: 100%;
}

header {
  background: white;
  height: 3.5em;
}

.logo {
  height: 4.5em;
  width: 4.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  /* 50% of your logo width */
  display: block;
  margin-top: 0;
}

.leftNavContainer {

}

.leftNavContainer a {
  position: relative;
  display: inline;
  margin: 4px;
}

.rightNavContainer {

}

.rightNavContainer a {
  position: relative;
  display: inline;
  margin: 4px;
}

Also MDN resource for Flex box -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Hope this help! 😇

Upvotes: 1

Related Questions