I'm having trouble with a button. It's a text with a background color and some padding. Basically, when I refresh the page, the button takes a bit less than a second before getting to its dimension. It starts with 0 paddings and gets to the value I set after a few moments like it was animated, but it wasn't. I didn't set any animation for it to do it. I'll leave the code here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777;
padding: 30px;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.80)),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
margin-bottom: 60px;
}
.heading-primary-main {
display: block;
font-size: 60px;
font-weight: 400;
letter-spacing: 35px;
animation: moveInLeft 1s ease-out;
/*animation-delay: 3s;*/
/*animation-iteration-count: 3;*/
}
.heading-primary-sub {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: 17.4px;
animation: moveInRight 1s ease-out;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
display: inline-block;
border-radius: 100px;
transition: transform, box-shadow, .2s;
position: relative;
animation: moveInBottom 1s ease-out;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn-white {
background-color: #fff;
color: #777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: tansform, opacity, .4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes moveInBottom {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
This thing happens in chrome but not in firefox. I'm following a course on a very well known website and, despite the guy does exactly the same code, it doesn't seem that he has the same problem.
Thank you guys, I really appreciate what you do every day, helping us solve our problems.
Happy new year, btw
Change transition it into
transition: transform .2s, box-shadow .2s; and transition: transform .4s, opacity .4s;
This is the way to use multiple properties in transition.
transition: transform, box-shadow, .2s; this will be equivalent to
transition-property: transform, box-shadow, all;
transition-duration: 0s, 0s, 0.2s;
Related
I’m trying to make a menu open button for my website, but there’s one slight problem, when I try to assign it to move vertically, for example do margin-top: 100px it won’t move. But when I set a margin-left it changes position and moves horizontally! I have no idea as to why this is happening. I would love to get some advice on how to put the menu button a bit further downwards. I have a feeling it has something to do with the attribute being a span, but I have no idea. Any help is greatly appreciated.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
background-size: cover;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
font-size: 40px;
display: inline-block;
width: 160px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 0px;
padding-bottom: 5px;
}
.navMenu a:hover {
color: #fddb3a;
}
.navMenu .dot {
width: 6px;
height: 6px;
background: #fddb3a;
border-radius: 50%;
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot {
-webkit-transform: translateX(80px);
transform: translateX(80px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover~.dot {
-webkit-transform: translateX(240px);
transform: translateX(240px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover~.dot {
-webkit-transform: translateX(400px);
transform: translateX(400px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover~.dot {
-webkit-transform: translateX(570px);
transform: translateX(570px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 50%;
width: 100%;
text-align: center;
}
.overlay .closebtn {
position: absolute;
top: 20px;
margin-right: 20px;
right: 45px;
font-size: 120px;
}
.openNav {
font-size: 50px;
margin-left: 100px;
color: black;
}
#media screen and (max-width: 1305px) {
.dot {
display: none;
}
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<nav class="navMenu">
Home
Blog
Work
About
<div class="dot"></div>
</nav>
</div>
</div>
<span class="openNav" style="cursor: pointer;" onclick="openNav()">☰</span>
</body>
</html>
I have a feeling it has something to do with the attribute being a span
That is right, because the span is by default has display: inline, and if you change it to display: block and apply some margin-top: 100px you see it changes the position.
.openNav{
display: block;
margin-top: 100px;
}
Fonts and elements don't scale when the screen size is reduced. Following is the code. In the developer tools if I change the root HTML font size, the font's and respective elements scale but when the screen size is reduced it doesn't.
/*
COLORS:
Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
font-grey: #777777
*/
* *::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777777;
padding: 3rem;
box-sizing: border-box;
}
.header {
height: 95vh;
/*95% of screen*/
background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(23, 133, 96, 0.8)), url(../img/hero.jpg);
background-size: cover;
/*image adapts to the screen*/
background-position: top;
/* top of the image stays the same whatever the screen size*/
clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%);
position: relative;
}
.logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.logo {
height: 3.5rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #ffffff;
text-transform: uppercase;
backface-visibility: hidden;
/*part behind the element gets hidden*/
margin-bottom: 4rem;
}
.heading-primary-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: left;
animation-duration: 1s;
animation-timing-function: ease-out;
/* animation-iteration-count: 2;
animation-delay: 2; */
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 2.1rem;
animation: left 1s ease-out;
}
#keyframes right {
from {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
#keyframes left {
from {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
#keyframes button {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
.btn-animated {
animation: button 0.5s ease-out 0.75s;
animation-fill-mode: backwards;
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.5s;
position: relative;
font-size: 1.6rem;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
/* x-axis y-axis blur color */
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.8);
}
.btn-white {
background-color: #fff;
color: #777777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.2) scaleY(1.4);
opacity: 0;
}
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo Natours" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">Where life happens</span>
</h1>
Discover Our Tours
</div>
</header>
<div>
</div>
CSS doesn't work like that. You need media queries in order to set different font sizes based on screen width.
I.e. you need to tell your browser that when the screen is some width or wider (or smaller), change the font size to Y.
This is for when you want the font size to work for everything above 601px
#media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
This is for when you want the font size to work for everything below 601px
#media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
I'm currently doing a school project, and I need to use Weebly to build a website.
Using Weebly's "embed code" section type, I put some code (that I stole off the internet) into the embed code area. The code is basically meant to show text whenever you hover your mouse over an image, however I'm having problems actually changing the font size. When I host it on my ide/browser, Font Size works fine, but when I host it on weebly, the font size is massive (and covers up the image. Does anyone know how to fix this?
Code here:
<!DOCTYPE html>
<html lang="en">
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
background-color: #000;
color: #fff;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 18;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1585 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1585:before,
.snip1585:after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 50px solid rgba(0, 0, 0, 0.5);
border-bottom: 50px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
}
.snip1585:before {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585:after {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1585 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.snip1585 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1585 h3 span {
display: block;
font-weight: 700;
}
.snip1585 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.snip1585:hover>img,
.snip1585.hover>img {
opacity: 0.7;
}
.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.snip1585:hover figcaption,
.snip1585.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
<figure class="snip1585">
<img src="http://www.applet-magic.com/unemploy.jpg" />
<figcaption>
<h3>"The first statistic for demonstrating the decline of the economy into depression is the unemployment rate"<span>Courtesy of "San Jose University"(Watkins, The Depression of the 1930's and Its Origins or Causes )</span></h3>
</figcaption>
</figure>
</html>
I have a heading text and a button below it. When I hover on button, the text into the heading and the button is shaking. I fixed it with the css property backface-visibility and then the text into the elements was blurred. How to solve this problem without the blurry effect ?
e.g. https://codepen.io/yozhikk/pen/odJVeY
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777777;
padding: 30px;
}
.header {
position: relative;
height: 95vh;
background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 131, 0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon( 0% 0%, 0% 100%, 100% 75vh, 100% 0%)
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.heading-primary {
color: #ffffff;
text-transform: uppercase;
margin-bottom: 60px;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.heading-primary-main {
font-weight: 400;
font-size: 60px;
letter-spacing: 35px;
display: block;
animation: moveInLeft 1.5s ease-out
}
.heading-primary-sub {
font-weight: 700;
font-size: 20px;
letter-spacing: 17.4px;
display: block;
animation: moveInRight 1.5s ease-out
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
display: inline-block;
border-radius: 100px;
padding: 15px 40px;
transition: all .2s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
.btn {}
.btn-white {
background-color: #fff;
color: #777777;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px)
}
80% {
transform: translateX(-10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">outdoors</span>
<span class="heading-primary-sub">is where live happens</span>
</h1>
Discover our tours
</div>
Remove these lines:
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
They move the button up on hover / active for no apparent reason, which I assume is the shaking you are talking about. So just not doing that should fix it.
Give the same property you added to the hover state to the initial state but make it invisible. If you give the hover state (border : 2px solid and pink;) add it in the initial state but you can make the color transparent( border: 3px solid transparent;) so it won't show before hovering on it
So I have this page with a nav bar, and on the nav bar, there is a img logo on the left and 3 links on the right. And when I test responsiveness with devices on Chrome, the nav bar resizes and shifts to the left, leaving a blank space on it's right. Here's a picture Nav bar not displaying fully
And here is all my code:
#font-face {
font-family: coyote;
src: url(font/coyote.ttf);
}
html {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
margin: 0;
padding: 0;
}
nav {
background: #efefef;
overflow: hidden;
box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
-moz-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: -2px -7px 47px 9px rgba(0, 0, 0, 0.35);
z-index: 999;
margin: 0;
padding: 0;
}
.logo-section {
float: left;
padding: 25px;
font-family: serif;
}
.logo-left {
width: 12%;
float: left;
overflow: none;
display: block;
margin: auto;
transform: translateY(20%);
}
.hb-button {
float: right;
background-color: rgba(0, 0, 255, 0);
color: black;
border: none;
font-size: 18px;
padding: 9px 10px;
border-radius: 3px;
cursor: pointer;
display: none;
outline: none;
}
nav a {
text-decoration: none;
color: #282828;
font-size: 16px;
}
nav ul {
overflow: hidden;
color: #fff;
margin: 0;
height: 68px;
text-align: center;
transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
-ms-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
}
nav ul li {
float: right;
display: inline-block;
font-family: coyote;
}
li > a {
color: #000;
text-decoration: none;
transition-timing-function: ease-in-out;
}
li > 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;
}
li > 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;
}
li > a:hover:after {
transform: scale(1);
}
.image-cont {
position: absolute;
min-width: 45%;
min-height: 45%;
top: 55%;
left: 50%;
overflow: visible;
}
.image {
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation: load_up 2s forwards;
margin-top: -50%;
margin-left: -50%;
position: relative;
}
.image-cont2 {
position: absolute;
top: 35%;
left: 50%;
overflow: visible;
}
.image2 {
display: none;
animation: load_up 2s forwards;
-webkit-animation: load_up 2s forwards;
-moz-animation: load_up 2s forwards;
-o-animation: load_up 2s forwards;
}
#media screen and (max-device-width: 1603px) and (min-device-width: 1081px) {
* {
margin: 0;
padding: 0;
}
header {
padding: 0;
margin: 0;
}
nav {
margin: 0;
padding: 0;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
z-index: 99999;
}
nav ul li {
margin 0;
}
}
#media screen and (max-device-width: 1080px) {
.logo-section {
float: none;
}
nav ul {
background: #ffffff;
max-height: 0px;
height: 0;
}
nav ul.show {
max-width: 100%;
max-height: 100%;
z-index: 9999;
height: 100%;
width: 100%;
}
nav ul li {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 15px;
padding-left: 25%;
text-align: center;
}
nav a {
display: block;
}
.hb-button {
display: inline;
}
.image {
display: none;
}
.image2 {
display: block;
margin-top: -35%;
margin-left: -50%;
}
.logo-left {
transform: translateY(-65%);
padding-left: 15px;
width: 10%;
}
}
#keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-webkit-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-moz-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#-o-keyframes load_up {
0% {
opacity: 0;
transform: translateY(11%);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/responsive_navbar.js"></script>
<link rel="stylesheet" href="main.css">
<header>
<nav>
<div class="logo-section">
<button class="hb-button"><i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div style="min-width: 1920px; margin: 0 auto;">
<a href="index.html"><img src="img/thermocase.png" class="logo-left">
</a>
</div>
<ul>
<li> ● Contact Us
</li>
<li> ● The Team
</li>
<li> ● Our Product
</li>
</ul>
</nav>
</header>
<div class="image-cont">
<img src="img/iphone.png" class="image" />
</div>
<div class="image-cont2">
<img src="img/iphone2.png" class="image2" />
</div>
Thanks for taking a look. Fyi, I'm new to this.
Two things you could start with.
You need to have your opening <body> tag immediately after your closing </head> tag, so you might want to consider using another div to wrap the main content on your page
<html>
<head> ... </head>
<body>
<header> ... </header>
<div class="main-content"> ... </div>
</body>
</html>
Secondly, at line 19 of your HTML you have
<div style="min-width: 1920px; margin: 0 auto;">
Hard coding the width of an element like this is going to give you a hard time once the viewport is less that 1920px. You might want to remove this inline CSS, and replace it with a class. Then you can easily manipulate the width of the div using CSS media queries, e.g.
HTML
<div class="logo-wrap"> ... </div>
CSS
.logo-wrap{
...
}
#media (min-width: 1920px) {
min-width: 1920px;
margin: 0 auto;
}
Edit
Try changing your viewport meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Good luck!