Member Avatar for Latrell_vie

Hi ! My website is working as intended on bigger screen,
but at @media screen and (max-width: 767px) following happens:
on firefox website still works fine but on google chrom the design cracks; <div class="menubar1">
extends out of <div class="topnavibar">

Anyone sees where i made the mistake ?

My index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="initial-scale=1">

</head>
<body>
<!--#include file="topnavibar.html" -->
<div class="maincontentHome">
    <img id="Banner" src="Banner3.gif" alt="Banner" >
    <div class="maincontentpic"></div>
     <div class="clearer"></div> 
</div>
<div class="footer">
 <div class="checkoutsection"> Check&nbsp;out&nbsp;partnersites:</div>
 <div style="clear: both"></div>
 <div class="footerlinkscontainer"> 
    <div id="updateDiv"><script type="text/javascript" src="footerContentEn.js"> </script></div>
 <div class="copyrightImpressumSection">&nbsp &copy Lalala.com &nbsp | All rights reserved | Salzburg Tel: 0660 1234567 </div>
 <div id="hitCounter"><a href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=www.Lalala.com/&digit=style/plain/3/&reloads=1" alt="www.reliablecounter.com" title="www.reliablecounter.com" border="0"></a><br /><a href="http://www.arztpraxismarketing.de" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">Praxismarketing</a>
  </div>
 </div>
</div>
<script>
function bigImg(x) {
    x.style.height = "40px";
    x.style.width = "40px";
    mousePointer(this);
}
function mousePointer(x){
    this.style.cursor="pointer"; 
}

function normalImg(x) {
    x.style.height = "20px";
    x.style.width = "20px";
}
function goToGB(){
     location.href = 'indexEn.html';
}
function goToAUT(){
     location.href = 'index.html';
}
</script>
</body>
</html>

and here is my style.css:

html,body{min-height:120%;width:100%;margin:0;background-image:url(pic9890.jpg);background-size:120%;background-attachment:fixed;}
/*------top section-------*/
.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:17px;
        background:#333;
        padding: 2% 2%;
        color:gold;
        margin-right:10px;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:gold;color:#333;}
#flags{position:absolute;top:1%;right:3%;cursor: pointer;}
/*------maincontent section-------*/        
.maincontentHome{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background:white;
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.maincontentSubpages{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background-image: url(glossywhite4.jpg);
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.workersdiv{background:#CECEF6;border: thick solid black;border-radius: 25px;font-size: 150%;margin-left:5%;margin-right:5%;margin-bottom:2%;padding:4%;}
#Banner{position:relative;top:1em;display: block;margin-left: auto;margin-right: auto;}
.clearer{clear: both;}

.maincontentpic{position:relative;top:2em;height:50em;background-image:url(CompHandWeb1.gif);background-size:100%;background-repeat: no-repeat;}

#picUeuWorker1{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(sam2.JPG); background-size: cover;}
#picUeuWorker2{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(ario2.jpg); background-size: cover;}
/*------footer section-------*/
.footer{position:relative;height:18%;margin-left:10%;margin-right:10%;margin-bottom:1%;background-color:black;color:grey;opacity:1;border:thick solid silver;
        border-bottom-left-radius:25px;border-bottom-right-radius:25px;}
.checkoutsection{font-size:110%;float:left;border:1px;background:orange;padding:1.5%;}
.footerlinkscontainer{text-align:center;margin:0% 0%;padding:0% 0%;font-size:200%;}
.footer  a{line-height:150%;margin:2% 1%;padding:0% 0%;}
.footer a:visited{color:blue;}
.footer a:hover{color:purple;}
#updateDiv{text-align:center;color:blue;line-height:150%;margin:2% 0% 0% 0%;padding:0% 0%;}
.copyrightImpressumSection{position:relative;font-size:60%;text-align:center;margin-bottom:1%;}
#hitCounter{position:absolute;bottom:0.1%;right:3%;font-size: 20%}

@media screen and (max-width: 767px) {
   .topnavibar{height:160px;}
   #flags{position:absolute;top:-10%;left:1%;margin-bottom:3px;} 
   .menubar1{display:flex;flex-direction:column;position:absolute;top:10%;width:93%;}
    .menubar1 > a {box-sizing:border-box;display:block;font-family:arial,helvetica,sans-serif;
        padding:0; margin:0;
        aling-self:stretch;
        margin-bottom:1px;
        font-size:17px;}

    #Banner{position:absolute;top:2em;width: 100%;display: block;margin-left: auto;margin-right: auto;}
    }
    .maincontentpic{position:relative;top:2em;height:30em;background-image:url(CompHandWeb1.gif);
     background-size:100%;background-repeat: no-repeat;}
    .copyrightImpressumSection{position:relative;width:100%;font-size:60%;text-align:center;margin-bottom:1%;}
    #hitCounter{position:static;height:20%;bottom:8%;right:3%;font-size: 20%;}
@media screen and (max-width: 768px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:5px;}
    }
@media screen and (max-width: 980px) {
    .menubar1 > a {
        font-size:7px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    }
@media screen and (max-width: 1300px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:10px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    }
  • 2 Contributors
  • 3 Replies
  • 249 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rtrethewey
Member Avatar for rtrethewey

Your 'viewport' <meta> tag is inadequate. Try:

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

Edited by rtrethewey
Member Avatar for Latrell_vie

Big thanks rtrethewey , that was the problem !!!! How did you find it so fast, did you once have the same trouble ?

Member Avatar for rtrethewey

It's just that the 'viewport' <meta> tag is a critical step in achieving responsive design, so that was the first thing I looked at in your code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.