html - The icon won't move down...? -

-

i'm having little trouble, icon won't move down, whole section moves down when i'm using margin-top (even on icon class).

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <title>mt medical</title>      <link rel="stylesheet" href="resources/css/style.css">     <link rel="stylesheet" href="vendors/css/grid.css">     <link rel="stylesheet" href="vendors/css/normalize.css">     <link rel="stylesheet" href="vendors/css/ionicons.min.css">     <link rel="stylesheet" href="vendors/css/animate.css"> </head> <body>     <header>         <div class="row">             <div class="top-header">                 <img src="https://placehold.it/200x200" alt="logo" class="logo">                 <p class="contact-number">(edited out)<br>                 (edited out)</p>                 <i class="ion-ios-telephone"></i>                 <i class="ion-ios-email"></i>                 </div>             </div>             <div class="row">                 <nav>                     <ul class="navigation-menu">                         <li><a class="nav-links" href="#">home</a></li>                         <li><a class="nav-links" href="#">about us</a></li>                     </ul>                 </nav>               </div>     </header>     <div class="about-us">         <div class="symbol-section">         <h1><span class="ion-information-circled main-headers"></span></h1>         </div>         <p class="main-p">             after many years in beauty , medical industry salon owner, distributor of product ranges , creator of own brands, educator , many years on road in sales have come across many types of equipment , interesting people in industry.<br><br> asked many of owners have come know me best products , equipment in market purchase @ affordable cost them. companies selling overpriced equipment no service , expensive consumables, burn many owners left high , dry when goes wrong. <br><br> working exclusive portfolio of  distributors have built businesses on honesty , integrity, deliver on service , supply l can confidently bring knowledge, skills , reputation supplier of quality, affordable devices combined australian owned , made skin care  range medical , beauty industry.          </p>     </div>  </body> </html>

and css:

/*---------basic settings-----------*/  * {     margin: 0;     padding: 0;     box-sizing: border-box; }  *:focus {     {outline: none}; }  html, body {     color: #3b3a3a;     font-family: 'yanone', sans-serif;     font-size: 20px;     font-weight: 300;     text-rendering: optimizelegibility;     overflow-x: hidden; }  .clearfix {zoom: 1} .clearfix:after {     content: '.';     clear: both;     display: block;     height: 0;     visibility: hidden; }  h1 {     font-size: 300%;     font-weight: 300; }  h2 {     font-size: 225%;     font-weight: 400; }  /*---------reusable content-----------*/  .row {     max-width: 100%;     margin: 0 auto; }  section {     padding: 80px 0; }  .box {     padding: 1%; }  /*-----------------------------------*/ /*              header               */ /*-----------------------------------*/  .top-header {     max-width: 100%;     height: auto;     background-image: url(/resources/img/asanoha-400px.png); }  .logo {     padding: 10px; }  .contact-number {     float: right;     padding: 10px;     color: #464646;     font-size: 130%;     margin-right: 10px;     margin-bottom: 80px;     display: block; }  .ion-ios-telephone {     float: right;     position: relative;     font-size: 150%;     margin-top: 10px;  }  .ion-ios-telephone:hover, .ion-ios-telephone:active {     opacity: 0.6;     transition: 0.2s; }  .ion-ios-email {     float: right;     position: relative;     font-size: 150%;     margin-top: 40px;     margin-right: -22px; }  .ion-ios-email:hover, .ion-ios-email:active {     opacity: 0.6;     transition: 0.2s; }  .main-headers {     text-align: center;  }  .symbol-section {     text-align: center;     margin-top: -100px; }  .main-p {     width: 750px;     margin: 0 auto;     text-align: center;     color: #464646; }   /*-----------------------------------*/ /*              navigation           */ /*-----------------------------------*/  nav {     width: 100%;     height: 60px;     background-color: #343434;  }  .navigation-menu {     text-align: center; } .navigation-menu li {     display: inline-block;     padding: 10px;     font-size: 110%;     padding-top: 15px; }   .navigation-menu li a:hover, .navigation-menu li a:active {     text-decoration: none;     opacity: 0.6; }  .navigation-menu li a:link, .navigation-menu li a:visited {     text-decoration: none;     color: #dbdbdb;     text-transform: uppercase;     margin: 0 auto; }  /*-------------about -------*/  .about-us {     background-image: url(/resources/img/brickwall.png);     height: 1000px;     width: 100%;     margin-top: 100px; }

and photo, if that's help... enter image description here

as can see, it's targeting actual element, when try move icon down, further navigation bar, whole section moves down?

you wrapped icon in <h1> tag typically has significant margin-bottom (like 15-20px). remove <h1> tag, , should see margin below icon shrink. can add margin-top.


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more