Absolutely Stuck Tried Everything Javascript runs in any test console but not on my website

!SOLVED! The script works completely now because i put the tags at the very bottom inside the body tags. The idea of moving the script tags was suggested in the comments. previously, i thought script tags were to be exclusively confined to the

Here's my code in its entirety. my script runs in consoles but will not run on my website. It's not a linking issue, its not a coding issue, I even have the test function

anAlert()

to test that javascript itself is working. I am sure there is something obviously wrong I am doing but i cannot figure out what it is for the life of myself.

var malediv = document.querySelector('.male');
var femalediv = document.querySelector('.female');
var male_sources = [
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
];
var female_sources = [
  "/images/f1.png",
  "/images/f2.png",
  "/images/f3.png",
  "/images/f4.png",
  "/images/f5.png",
  "/images/f6.png",
  "/images/f7.png",
  "/images/f8.png",
];


function displayRandMaleImage() {
  malediv.innerHTML = "";
  var malerandom_number = Math.floor(Math.random() * male_sources.length);
  var random_male_image_source = male_sources[malerandom_number];
  maleimg = document.createElement('img');
  maleimg.setAttribute('src', random_male_image_source);
  malediv.append(maleimg);
  alert('maleimagedisplayed');
}

function displayRandFemaleImage() {
  femalediv.innerHTML = "";
  var femrandom_number = Math.floor(Math.random() * female_sources.length);
  var random_female_image_source = female_sources[femrandom_number];
  femaleimg = document.createElement('img');
  femaleimg.setAttribute('src', random_female_image_source);
  femalediv.append(femaleimg);
}

function displayRandImages() {
  displayRandMaleImage();
  displayRandFemaleImage();
  alert('SKEEET');
}

function anAlert() {
  alert('SKEEEETTT')
}
window.onload = anAlert()
<!DOCTYPE html>
<html style="height:100%;width:100%;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Parasol | Luxury Designer Streetwear Fashion Clothing for Women & Men </title>
</head>

<body style="height:95%;width:99%;" onload="displayRandImages();">
  <div class="male" style="width:25%;float:left;height:100%;">
    <img src="http://i.dailymail.co.uk/i/pix/2015/01/21/24EB9E3D00000578-2920622-image-m-72_1421873925034.jpg" style="max-width:95%;padding:2.5%;padding-top:49.5%;" />
  </div>
  <div style="width:50%;position:relative;margin:0 auto;height:100%;float:left;">
    <div style="height:3.5%;width:100%;overflow:auto;font-family:courier;">
      <h4 style="margin-top:0px;margin-bottom:0px;">Hey! follow @parasolhc.Subscribe to our text notifications by... now!
      </h4>
    </div>
    <div style="height:4.5%;width:100%;font-family:courier;">
      <div style="width:25%;height:100%;background-color:#925f52;float:left;">
        <h4 style="color:#a36a5c;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          home
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#cac7a7;float:left;">
        <h4 style="color:#d9d7bf;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          <a style="color:#d9d7bf;text-decoration:none;" href="https://i.redd.it/79q85dxbt2x01.jpg">
								content
								</a>
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#002e5d;float:left;">
        <h4 style="color:#004080;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          shop
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#ff9955;float:left;">
        <h4 style="color:#ffad33;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          about
        </h4>
      </div>

    </div>
    <div style="float:left;width:10%;height:10%;display:inline-block;margin-bottom:10%;position:absolute;">
      <h1 style="font-family:courier;float:left;clear:right;position:absolute;">
        Parasol
      </h1>
    </div>
    <div style="height:15%;position:static;padding-top:5%;margin-left:27.5%;padding-bottom:5%;">
      <h2 style="font-family:courier;text-align:center;">
        Cartridge I
      </h2>
      <p style="font-family:courier;text-align:center;">click the images below to purchase</p>
    </div>
    <div style="width:100%;height:40%;margin-top:5%;position:static;overflow:auto;">
      <div style="margin:auto;width:100%;height:30%;float:right;position:absolute;">
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
      </div>
    </div>
  </div>
  <div style="width:25%;float:left;height:100%;" class="female">
  </div>
</body>

</html>

  • Input button - resize text but keep button size

    I want to make a custom button css and try to make "pressed" button looks like it's pressed:

    input[type="button"]
    {
      border: 1px solid #777;
      border-radius: .2em;
      box-shadow: 0 0 .3em #777;
      background: #fff;
      color: #555;
      font-size: 1rem;
      height: 2rem;
      margin: .5rem;
      -webkit-appearance: none;
    }
    
    
    input[type="button"]:active
    {
      box-shadow: inset 0 0 .1em #777;
      font-size: .9em;
      height: 2rem;
    }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ligula vitae eros ultrices luctus. 
    <input type="button" value="Button one"> Vivamus ut felis massa. Cras a urna egestas, vehicula diam eu, accumsan lectus. Sed feugiat, odio quis cursus venenatis, felis dolor ultricies arcu, sit amet convallis eros nisi vel neque. <input type="button" value="Second button"> Cras facilisis in diam vel eleifend. Duis at tincidunt dui. Aliquam egestas at metus in malesuada. Nulla tincidunt lorem vel cursus porttitor. Phasellus gravida eleifend nulla.

    Looks ok for me, but changing font size expectedly resizes button itself, causing whole layout to change. At the other hand, I cannot set button' width because I want to make a 'generic' css for all my pages and all buttons there, and I do not know what text will be inside. The question: is there a way to keep button's width while changing its font size? Or the only way is to use "div in div" instead of buttons?

  • Flip animation support in IE

    I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip

    and this is the class:

    .flip-horizontal-bottom {
        -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
                animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    }
    
    
    /**
     * ----------------------------------------
     * animation flip-horizontal-bottom
     * ----------------------------------------
     */
    @-webkit-keyframes flip-horizontal-bottom {
      0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
      }
      100% {
        -webkit-transform: rotateX(-180deg);
                transform: rotateX(-180deg);
      }
    }
    @keyframes flip-horizontal-bottom {
      0% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
      }
      100% {
        -webkit-transform: rotateX(-180deg);
                transform: rotateX(-180deg);
      }
    }
    

    It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?

  • Website streatches backgrond image on mobile

    @charset "utf-8";
    
    
    @import url("fontawesome-4.6.3.min.css");
    @import url("custom.flexslider.css");
    @import url("framework.css");
    
    /* Rows
    --------------------------------------------------------------------------------------------------------------- */
    .row0{border-bottom:1px solid;}
    .row1, .row1 a{}
    .row2, .row2 a{}
    .row3, .row3 a{}
    .row4, .row4 a{}
    .row5, .row5 a{}
    
    
    /* Top Bar
    --------------------------------------------------------------------------------------------------------------- */
    #topbar{padding:15px 0; font-size:62%; text-transform:uppercase;}
    
    #topbar *{margin:0; padding:0; list-style:none;}
    #topbar ul li{display:inline-block; margin-right:10px; padding-right:15px; border-right:1px solid;}
    #topbar ul li:last-child{margin-right:0; padding-right:0; border-right:none;}
    #topbar i{margin:0 5px 0 0; line-height:normal;}
    
    
    /* Header
    --------------------------------------------------------------------------------------------------------------- */
    #header{}
    
    #header #logo{margin:30px 0 0 0;}
    #header #logo h1{margin:0; padding:0; font-size:22px; text-transform:uppercase;}
    
    
    /* Page Intro
    --------------------------------------------------------------------------------------------------------------- */
    #pageintro{padding:150px 0 300px;}
    
    #pageintro li article{display:block; max-width:100%; margin:0 auto; text-align:center;}
    #pageintro li article *{margin:0;}
    #pageintro li p:first-of-type{margin-bottom:10px; font-style:italic;}
    #pageintro li .heading{margin-bottom:30px; font-size:3rem; word-wrap:break-word;}
    #pageintro li p:nth-of-type(2){line-height:1.5rem;}
    #pageintro li footer{margin-top:40px;}
    
    #pageintro footer form{display:block; position:relative; max-width:50%; margin:0 auto; overflow:hidden;}
    #pageintro footer input, #pageintro footer button{display:block; height:44px; border:none; border-radius:22px;}
    #pageintro footer input{width:100%; padding:5px 40px 5px 15px;}
    #pageintro footer button{position:absolute; top:1px; right:1px; width:42px; height:42px; font-size:16px; cursor:pointer; border-radius:50%;}
    #pageintro footer button em{display:none;}
    
    
    /* Content Area
    --------------------------------------------------------------------------------------------------------------- */
    .container{padding:80px 0;}
    
    /* Content */
    .container .content{}
    
    .sectiontitle{display:block; margin-bottom:80px;}
    .sectiontitle *{margin:0;}
    
    #introblocks{position:relative; z-index:1;}
    #introblocks > ul{display:block; margin:-200px 0 80px;}
    #introblocks > ul > li{text-align:center;}
    #introblocks > ul > li > article{display:inline-block; width:100%; max-width:320px; text-align:left;}
    #introblocks > ul > li > article > div{padding:30px 20px;}
    #introblocks > ul > li > article > div *{margin:0; padding:0;}
    #introblocks > ul > li > article > div .heading{margin-bottom:10px; font-size:1.2rem;}
    #introblocks > ul > li > article footer{border-top:1px solid;}
    #introblocks > ul > li > article footer a{display:block; position:relative; width:100%; height:39px; line-height:39px; padding:0 20px; text-transform:uppercase;}
    #introblocks > ul > li > article footer a::after{position:absolute; top:0; right:0; height:100%; padding:0 15px; font-family:"FontAwesome"; content:"\f105"; border-left:1px solid;}
    
    #newsletter input, #newsletter button{border:1px solid; border-radius:22px;}
    #newsletter input{display:block; width:100%; padding:8px;}
    #newsletter button{padding:8px 18px 10px; border:none; text-transform:uppercase; font-weight:700; cursor:pointer;}
    
    /* Comments */
    #comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
    #comments li{margin:0 0 10px 0; padding:15px;}
    #comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
    #comments address{font-weight:bold;}
    #comments time{font-size:smaller;}
    #comments .comcont{display:block; margin:0; padding:0;}
    #comments .comcont p{margin:10px 5px 10px 0; padding:0;}
    
    #comments form{display:block; width:100%;}
    #comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
    #comments textarea{overflow:auto;}
    #comments div{margin-bottom:15px;}
    #comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
    
    /* Sidebar */
    .container .sidebar{}
    
    .sidebar .sdb_holder{margin-bottom:50px;}
    .sidebar .sdb_holder:last-child{margin-bottom:0;}
    
    
    /* Footer
    --------------------------------------------------------------------------------------------------------------- */
    #footer{padding:80px 0; text-align:center;}
    
    #footer .heading, #footer ul{margin-bottom:30px;}
    #footer > ul:last-of-type{margin-bottom:0;}
    #footer .faico a{border-radius:50%;}
    
    
    /* Copyright
    --------------------------------------------------------------------------------------------------------------- */
    #copyright{padding:20px 0;}
    #copyright *{margin:0; padding:0;}
    
    
    /* Transition Fade
    --------------------------------------------------------------------------------------------------------------- */
    *, *::before, *::after{transition:all .0s ease-in-out;}
    #mainnav form *{transition:none !important;}
    
    
    
    
    
    /* Navigation
    --------------------------------------------------------------------------------------------------------------- */
    nav ul, nav ol{margin:0; padding:0; list-style:none;}
    
    #mainnav, #breadcrumb, .sidebar nav{line-height:normal;}
    #mainnav .drop::after, #mainnav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}
    
    /* Top Navigation */
    #mainnav{}
    #mainnav ul{text-transform:uppercase;}
    #mainnav ul ul{z-index:9999; position:absolute; width:180px; text-transform:none;}
    #mainnav ul ul ul{left:180px; top:0;}
    #mainnav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
    #mainnav li:last-child{margin-right:0;}
    #mainnav li li{width:50%; margin:0;}
    #mainnav li a{display:block; padding:30px 0;}
    #mainnav li li a{border:solid; border-width:0 0 1px 0;}
    #mainnav .drop{padding-left:15px;}
    #mainnav li li a, #mainnav li li .drop{display:block; margin:0; padding:10px 15px;}
    #mainnav .drop::after, #mainnav li li .drop::after{content:"\f0d7";}
    #mainnav .drop::after{top:35px; left:5px;}
    #mainnav li li .drop::after{top:15px; left:5px;}
    #mainnav ul ul{visibility:hidden; opacity:0;}
    #mainnav ul li:hover > ul{visibility:visible; opacity:1;}
    
    #mainnav form{display:none; margin:0; padding:0;}
    #mainnav form select, #mainnav form select option{display:block; cursor:pointer; outline:none;}
    #mainnav form select{width:100%; padding:5px; border:1px solid;}
    #mainnav form select option{margin:5px; padding:0; border:none;}
    
    /* Breadcrumb */
    #breadcrumb{padding:120px 0 30px;}
    #breadcrumb ul{margin:0 0 30px 0; padding:0 0 8px 0; list-style:none; text-transform:uppercase; border-bottom:1px solid;}
    #breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
    #breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
    #breadcrumb li a::after{top:3px; right:0; content:"\f101";}
    #breadcrumb li:last-child a{margin:0; padding:0;}
    #breadcrumb li:last-child a::after{display:none;}
    #breadcrumb .heading{margin:0; font-size:1.6rem;}
    
    /* Sidebar Navigation */
    .sidebar nav{display:block; width:100%;}
    .sidebar nav li{margin:0 0 3px 0; padding:0;}
    .sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
    .sidebar nav a::after{top:9px; left:5px; content:"\f101";}
    .sidebar nav ul ul a{padding-left:35px;}
    .sidebar nav ul ul a::after{left:25px;}
    .sidebar nav ul ul ul a{padding-left:55px;}
    .sidebar nav ul ul ul a::after{left:45px;}
    
    /* Pagination */
    .pagination{display:block; width:100%; text-align:center; clear:both;}
    .pagination li{display:inline-block; margin:0 2px 0 0;}
    .pagination li:last-child{margin-right:0;}
    .pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}
    
    /* Back to Top */
    #backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2; border-radius:50%; background-clip:padding-box;}
    #backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
    #backtotop.visible{visibility:visible; opacity:.5;}
    #backtotop:hover{opacity:1;}
    
    
    /* Tables
    --------------------------------------------------------------------------------------------------------------- */
    table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
    table, th{table-layout:auto;}
    table{width:100%; margin-bottom:15px;}
    th, td{padding:5px 8px;}
    td{border-width:0 1px;}
    
    
    /* Gallery
    --------------------------------------------------------------------------------------------------------------- */
    #gallery{display:block; width:100%; margin-bottom:50px;}
    #gallery figure figcaption{display:block; width:100%; clear:both;}
    #gallery li{margin-bottom:30px;}
    
    
    /* Font Awesome Social Icons
    --------------------------------------------------------------------------------------------------------------- */
    .faico{margin:0; padding:0; list-style:none;}
    .faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
    .faico li:last-child{margin-right:0;}
    .faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center; border-radius:50%; background-clip:padding-box;}
    
    .faico a{color:#000000; background-color:#FFFFFF;}
    .faico a:hover{color:#FFFFFF;}
    
    .faicon-dribble:hover{background-color:#EA4C89;}
    .faicon-facebook:hover{background-color:#3B5998;}
    .faicon-google-plus:hover{background-color:#DB4A39;}
    .faicon-linkedin:hover{background-color:#0E76A8;}
    .faicon-twitter:hover{background-color:#00ACEE;}
    .faicon-vk:hover{background-color:#4E658E;}
    
    
    /* Colours
    --------------------------------------------------------------------------------------------------------------- */
    body{color:#474747; background-color:#FFFFFF;}
    a{color:#6677BC;}
    a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
    hr, .borderedbox{border-color:#D7D7D7;}
    label span{color:#FF0000; background-color:inherit;}
    input:focus, textarea:focus, *:required:focus{border-color:#6677BC;}
    .overlay{color:#FFFFFF; background-color:inherit;}
    .overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
    
    .btn, .btn.inverse:hover, a .icon, a.inverse:hover .icon{color:#FFFFFF; background-color:#6677BC; border-color:#6677BC;}
    .btn:hover, .btn.inverse, a:hover .icon, a.inverse .icon{color:inherit; background-color:transparent; border-color:inherit;}
    
    
    /* Rows */
    .row0, .row0 a{color:#CBCBCB; background-color:#000000; border-color:rgba(255,255,255,.2);}
    .row1{color:#FFFFFF; background-color:rgba(0,0,0,.2);}
    .row2, .row2 a{}
    .row3{color:#474747; background-color:#FFFFFF;}
    .row4{color:#CBCBCB; background-color:#000000;}
    .row5, .row5 a{color:#474747; background-color:#FFFFFF;}
    
    .coloured{color:#FFFFFF; background-color:#6677BC;}
    .coloured .btn{color:inherit; background-color:transparent; border-color:inherit;}
    .coloured .btn:hover{color:#6677BC; background-color:#FFFFFF;}
    
    
    /* Top Bar */
    #topbar, #topbar ul li{border-color:rgba(255,255,255,.2);}
    #topbar > div:last-of-type li:first-child a{color:#6677BC;}
    
    
    /* Header */
    #header #logo a{color:inherit;}
    
    
    /* Page Intro */
    #pageintro footer input, #pageintro footer button{color:#000000; background-color:#FFFFFF;}
    #pageintro footer button{color:#FFFFFF; background-color:#6677BC;}
    
    .flex-direction-nav a{color:rgba(255,255,255,1);}
    .flex-control-paging li a{background-color:rgba(255,255,255,1); border-color:rgba(255,255,255,0);}
    .flex-control-paging li a.flex-active{background-color:rgba(255,255,255,0); border-color:rgba(255,255,255,1);}
    
    
    /* Content Area */
    #introblocks > ul > li > article{color:#474747; background-color:#FFFFFF;}
    #introblocks > ul > li > article footer, #introblocks > ul > li > article footer a::after{border-color:#D7D7D7;}
    
    #newsletter input, #newsletter button{color:#474747; border-color:#D7D7D7;}
    #newsletter input{background-color:#FFFFFF;}
    #newsletter input:focus{border-color:#6677BC;}
    #newsletter button{color:#FFFFFF; background-color:#6677BC;}
    
    
    /* Footer */
    #footer .heading{color:inherit;}
    #footer nav a{color:inherit;}
    #footer nav li:first-child a, #footer nav a:hover{color:#6677BC;}
    
    
    /* Navigation */
    #mainnav li a{color:inherit;}
    #mainnav .active a, #mainnav a:hover, #mainnav li:hover > a{color:#6677BC; background-color:inherit;}
    #mainnav li li a, #mainnav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);}
    #mainnav li li:hover > a, #mainnav .active .active > a{color:#FFFFFF; background-color:#6677BC;}
    #mainnav form select{color:#FFFFFF; background-color:#000000; border-color:rgba(136,136,136,.5);/* #888888 */}
    
    #breadcrumb ul{border-color:rgba(255,255,255,.2);}
    #breadcrumb a{color:inherit; background-color:inherit;}
    #breadcrumb li:last-child a{color:#6677BC;}
    
    .container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
    .container .sidebar nav a:hover{color:#6677BC;}
    
    .pagination a, .pagination strong{border-color:#D7D7D7;}
    .pagination .current *{color:#FFFFFF; background-color:#6677BC;}
    
    #backtotop{color:#FFFFFF; background-color:#6677BC;}
    
    
    /* Tables + Comments */
    table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
    #comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#6677BC;}
    th{color:#FFFFFF; background-color:#373737;}
    tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
    tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
    table a, #comments a{background-color:inherit;}
    
    
    /* ------------------------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------------------------ */
    
    
    /* Media Queries
    --------------------------------------------------------------------------------------------------------------- */
    @-ms-viewport{width:device-width;}
    
    
    /* Max Wrapper Width - Laptop, Desktop etc.
    --------------------------------------------------------------------------------------------------------------- */
    @media screen and (min-width:978px){
    	.hoc{max-width:978px;}
    }
    
    
    /* Mobile Devices
    --------------------------------------------------------------------------------------------------------------- */
    @media screen and (max-width:900px){
    	.hoc{max-width:90%;}
    
    	#topbar{}
    
    	#header{padding:30px 0;}
    	#header #logo{margin-top:3px;}
    
    	#mainnav{}
    	#mainnav ul{display:none;}
    	#mainnav form{display:block;}
    
    	#breadcrumb{}
    
    	.container{}
    	#comments input[type="reset"]{margin-top:10px;}
    	.pagination li{display:inline-block; margin:0 5px 5px 0;}
    
    	#footer{}
    
    	#copyright{}
    	#copyright p:first-of-type{margin-bottom:10px;}
    }
    
    
    @media screen and (max-width:750px){
    	.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{display:none;}
    	.flex-control-nav{display:block;}
    
    	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
    	.fl_left, .fl_right{display:block; float:none;}
    	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
    
    	#topbar{text-align:center;}
    	#topbar ul{margin:0 0 15px 0;}
    	#topbar div:last-child ul{margin:0;}
    
    	#header{text-align:center;}
    	#header #logo{margin:0 0 15px 0;}
    
    	#introblocks > ul > li{margin-bottom:50px;}
    	#introblocks > ul > li:last-child{margin-bottom:0;}
    
    	.container{padding-bottom:50px;}/* Not neccessary - just looks better */
    }
    
    
    @media screen and (max-width:450px){
    	#topbar ul li{margin-bottom:2px; padding-right:0; border-right:none;}
    
    	#pageintro li footer form{max-width:none; width:100%;}
    }
    
    
    /* Other
    --------------------------------------------------------------------------------------------------------------- */
    @media screen and (max-width:650px){
    	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
    	.scrollable table{margin:0; padding:0; white-space:nowrap;}
    
    	.inline li{display:block; margin-bottom:10px;}
    	.pushright li{margin-right:0;}
    
    	.font-x2{font-size:1.4rem;}
    	.font-x3{font-size:1.6rem;}
    
    	#pageintro li article{max-width:none; width:100%;}
    	#pageintro li .heading{font-size:1.6rem;}
    }

    div class="bgded overlay" style="background-image:url('../imagini/01.png');" > 
      <div class="wrapper row1">
      </div>
      <div id="pageintro" class="hoc clear"> 
        <div class="flexslider basicslider">
    	
    	<!--==================
    			Slides
    	====================-->
          <ul class="slides">
            <li>
              <article>
                <p></p>
                <h3 class="heading">Vezi Magazinul Nostru</h3>
                <p>Vezi o Panorama cu Interiorul Magazinului</p>
                <footer><a class="btn inverse" href="imagini/Panorama/panorama.jpg">Vezi Panorama</a></footer>
              </article>

    So. im doing this for my job, im still new to this, so i am learning as i am working, on the pc it look as i wanted it pictures all fit well and all, but on mobile the background images are a bit wierd it's like the phone zooms on the backgrond image only, everything else is fine, only bakground images are messy.

    images: https://imgur.com/a/lyznVmo