html - Image on right when resize the browser -
i need help. have image under text, when browser re-sized image not under text, on right. hope can me figure out did wrong. html
<!doctype html> <head> <meta charset="utf-8"> <title>alco - blog</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/webflow.css"> <link rel="stylesheet" type="text/css" href="css/alcotemplate.webflow.css"> <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script> webfont.load({ google: { families: ["montserrat:400,700","lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic"] } }); </script> <script type="text/javascript" src="js/modernizr.js"></script> <link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico"> <link rel="apple-touch-icon" href="images/webclip-slate.png"> </head> <body> <header class="navbar"> <div class="w-container"> <div class="w-row"> <div class="w-col w-col-4 w-clearfix"> <img class="logo" src="images/logo.png" alt="53a187e6c2e6cb0d0ecbc4a3_logo.png"> </div> <div class="w-col w-col-8 nav-column"><a class="nav-link" href="#">home</a><a class="nav-link" href="#page-nav-share">about</a><a class="nav-link" href="#">portfolio</a><a class="nav-link" href="#">blog</a><a class="nav-link" href="#">contact</a> </div> </div> </div> </header> <section class="w-container"> <h4>blog</h4> <img class="image" src="images/untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_untitled-1.png"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris eget quam orci.</p> </section> <div class="w-container container"> <div class="blog"> <div class="border"> <img class="scale-with-grid" src="images/blogpost.png" /> <h5><a href="blog-post.html">neque porro quisquam est qui lorem ipsum.</a></h5> <h3>our team</h3> <img class="image" src="images/untitled-1.png" alt="53a1bc1164a4f9aa1001d86e_untitled-1.png"> <p>at vero eos et accusamus et iusto</p> </div> <div class="section grey footer"></div> <img src="images/footer.png" alt="53a425b2eaa4a69a21bd719e_footer.png"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/webflow.js"></script> <!--[if lte ie 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]--> </body> </html> css
body { background-image: url('../images/bg_black.png'); font-family: montserrat, sans-serif; color: #333; font-size: 12px; line-height: 20px; } h1, h2, h3, h4, h5, h6 { text-align: center; } h1 { display: block; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 38px; line-height: 44px; font-weight: 700; } h2 { margin-top: 10px; margin-bottom: 10px; font-family: montserrat, sans-serif; color: #745785; font-size: 32px; line-height: 36px; font-weight: 400; } h3 { display: block; margin: 25px auto 10px; padding-top: 0px; font-family: lato, sans-serif; color: #858181; font-size: 15px; line-height: 30px; font-weight: 300; } h4 { margin: 47px 0px 10px; font-family: lato, sans-serif; color: #828181; font-size: 25px; line-height: 24px; font-weight: 300; } h5 { margin: 10px 0px; font-size: 14px; line-height: 20px; font-weight: 700; } h6 { margin: 10px 0px; font-size: 12px; line-height: 18px; font-weight: 700; } p { position: relative; display: block; margin: 17px auto 55px; padding-top: 16px; padding-right: 0px; padding-bottom: 0px; float: none; clear: none; font-family: lato, sans-serif; color: #858181; font-size: 12px; line-height: 18px; font-weight: 300; text-align: center; text-decoration: none; } .section { padding-top: 65px; padding-bottom: 65px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .section.grey { background-color: #f5f6f7; } .section.grey.footer { margin-top: 111px; padding-top: 49px; padding-bottom: 49px; border-bottom-style: none; background-image: url('../images/bg_black.png'); text-align: center; } .nav-link { display: inline-block; margin-right: 12px; margin-left: 12px; border-bottom: 1px solid transparent; opacity: 1; -webkit-transition: border 300ms ease; -o-transition: border 300ms ease; transition: border 300ms ease; font-family: lato, sans-serif; color: #7a7a7a; font-size: 14px; font-weight: 300; text-decoration: none; text-transform: uppercase; } .nav-link:hover { border-bottom-color: #5169fc; } .nav-column { font-weight: 300; text-align: right; } .logo-in-footer { display: block; margin-top: 22px; margin-right: auto; margin-left: auto; text-shadow: black 0px 0px 0px; } .social-button { width: 36px; height: 36px; margin-right: 5px; margin-left: 5px; padding-top: 7px; border-radius: 60px; background-color: #745785; -webkit-transition: background-color 300ms ease; -o-transition: background-color 300ms ease; transition: background-color 300ms ease; } .social-button:hover { background-color: #f02e4e; } .footer-text { display: inline; } .navbar { padding-top: 39px; padding-bottom: 39px; background-image: url('../images/bg_black.png'); } .text-link { text-decoration: none; } .text-link:hover { text-decoration: none; } .button-block { margin-top: 17px; } .logo { margin-right: 12px; float: left; } .slider { width: auto; height: 500px; margin-top: 0px; float: none; } .slider.slide-1 { background-image: url('../images/picjumbo.com_img_7609%20(1).jpg'); background-position: 0% 53%; background-size: cover; } .image { display: block; margin: 32px 0px 0px 464px; padding-left: 0px; float: none; opacity: 1; } .container { margin-top: 60px; } .slide-1 { opacity: 0.5; } .row { margin-top: 75px; } .text-block { margin-top: 27px; margin-left: 19px; font-family: lato, sans-serif; color: #b7b5b5; font-size: 12px; line-height: 18px; font-weight: 300; } .imagefooter { margin-top: 145px; margin-bottom: 35px; } .image-slider { opacity: 0.5; } .imagefooter1 { margin-top: 11px; margin-left: 244px; } .category { margin-top: 52px; margin-left: 317px; } .imageportfolio { margin-top: 75px; margin-left: 66px; } @media (max-width: 991px) { p { font-size: 14px; line-height: 21px; } } @media (max-width: 767px) { h2 { margin-top: 0px; } .section { padding-top: 33px; padding-bottom: 33px; text-align: center; } .nav-column { padding-top: 22px; text-align: center; } .navbar { padding-top: 24px; padding-bottom: 24px; text-align: center; } .logo { display: inline-block; margin-top: -6px; float: none; } } @media (max-width: 479px) { h3 { font-size: 18px; line-height: 23px; } .section { text-align: center; } .section.white { padding-top: 0px; padding-bottom: 0px; } } would highly appreciated if can me. forward hear you.
Comments
Post a Comment