CODEWITHSUNDEEP
htmlcss
Louis Dias
Louis Dias

Reputation: 41

Make the whole page scalable

I have a quick project that I'm building right now. That's why I would like to make my whole page scalable and not use media queries, as it would be faster and save me a lot of time. The only problem is that I'm still a beginner, and I don't really know how to make it fully scalable.

Could someone help me with this? As you can see, the page is not really optimized, the nav bar doesn't resize, and the links don't either (properly, at least). Thanks in advance.

HTML

<html>

<head>
  <title>Thermocase</title>
  <link rel="icon" href="img/fav.png" type="image/png">
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <img src="img/iphone.png" class="bg" />
  <nav class="global-nav">
    <img src="img/thermocase.png" class="logo-left" />
    <ul class="menu">
      <li><a href="#">Contact us</a></li>
      <li><a href="#">The Team</a></li>
      <li><a href="#">Our Product</a></li>
    </ul>
  </nav>
</body>

</html>

CSS

@font-face {
    font-family: bebas;
    src: url(font/coyote.ttf);
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes load_up {
    from {
        opacity:0;top:10%
    }
    to {
        opacity:1;top:0%;
    }

}

@-webkit-keyframes load_up {
    from {
        opacity:0;top:10%
    }
    to {
        opacity:1;top:0%;
    }

}

@-moz-keyframes load_up{
    from {
        opacity:0;top:10%
    }
    to {
        opacity:1;top:0%;
    }

}

@-o-keyframes load_up{
    from {
        opacity:0;top:10%
    }
    to {
        opacity:1;top:0%;
    }

}



body {
    background-color: white;
    margin: 0;
    width: 100%;
    height: 100%;
}

.bg {
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */
    animation: load_up 2s forwards;
    -webkit-animation: load_up 2s forwards;
    -moz-animation: load_up 2s forwards;
    -o-animation : load_up 2s forwards;
    width: 45%;
    left: 28%;
    padding-top: 7%;
    position: fixed;
}

.global-nav {
    position: fixed;
    top: 0;
    z-index: 9999;
    height: 15%;
    width: 100%;
    background: #ffff;
    color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logo-left {
    position: absolute;
    top: 27%;
    padding-left: 2%;
    display: block;
    width: 15%;


}


.menu li { 
    display: block;
    font-family: bebas;
    letter-spacing: -3px;
    font-size: 20px;
    float: right;
    padding-right: 5%;
    padding-top: 2%;
    text-align: center;
}

.menu a:hover {
    color:#CF2034;
    transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
    -o-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
    -moz-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
    -webkit-transition: color .7s cubic-bezier(0.11, 0.7, 0, 1);
    transition-timing-function: ease-in-out;

}

.menu a {
    text-decoration: none;
    color: inherit; 
    color: black;
    transition-timing-function: ease-in-out;


}

.menu a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #CF2034;
    content: "";
    transform: scale(0);
    -o-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
    -moz-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
    -webkit-transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
    transition: transform 1s cubic-bezier(0.11, 0.7, 0, 1) ;
    transition-timing-function: ease-in-out;

}

.menu a:hover:after {
  transform: scale(1);
}

Upvotes: 1

Views: 4395

Answers (2)

James Page
James Page

Reputation: 1

I don't see a media query in your CSS, which would also include classes and IDs with percentages.

Upvotes: 0

Puka
Puka

Reputation: 1575

here are a few tips.

Use relative dimensions

You could do so thanks to various units:

  • percentages
  • em: relative to the font-size of the element (2em means 2 times the size of the current font)
  • ex: relative to the x-height of the current font (rarely used)
  • ch: relative to width of the "0" (zero)
  • rem: relative to font-size of the root element
  • vw and vh: relative to 1% of the width or the height of the viewport
  • vmin and vmax: relative to 1% of viewport's* smaller or larger dimension
  • and many more...

https://www.w3schools.com/CSSref/css_units.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/length

You may also want to check browser's support before using such units:

  1. Viewport's units support tables

Correctly set the viewport

allowing smaller screens to zoom in and out

<meta content="width=device-width, initial-scale=1" name="viewport">

A viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
https://www.w3schools.com/css/css_rwd_viewport.asp

Serve different pages based on the device

Dynamic serving - Google Web Fundamentals

I never used this technique, so I hope you'll find all you need in the Web Fundamentals.

Use media-queries

I know you don't want to, but it's the best options you've got

Here are some references:

Hope I helped a bit :)

Upvotes: 2

Related Questions