-1

I am new in web developing and I just finish my first website: www.aviakassir.az But I face the problem when try to open my website on mobile device. Some part of my header not diplayed at all (contact and languages line on top). Menu is splitted into two parts and search script located down the image. 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
    <meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aviakassir</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/hover-min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/chosen.min.css">
    <link rel="stylesheet" href="css/jquery-customselect.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/assets/revolution/layers.css">
    <link rel="stylesheet" href="css/assets/revolution/navigation.css">
    <link rel="stylesheet" href="css/assets/revolution/settings.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

What I missed here? Here how my page looks in mobile Chrome: enter image description here

Leyla
  • 29
  • 5

1 Answers1

0

Check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen

@media only screen and (max-width: 767px)
.header-top-left {
    display: none;
}

set display: block;
Bö macht Blau
  • 12,820
  • 5
  • 40
  • 61
Ali Naeimi
  • 612
  • 8
  • 16
  • why max-width is 767 px? – Leyla Nov 10 '18 at 17:19
  • check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen. – Ali Naeimi Nov 10 '18 at 17:21
  • 1
    Please add some explanation to the answer itself, such that others can learn from it. Do not use the comment section for relevant information – Nico Haase Nov 11 '18 at 13:32