WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Having a height "stretching" issue that is so simple its driving me insane

Reply
  Thread Tools Display Modes
Old 21st March 16, 07:09 PM   #1
baytes
WLC Member
 
Join Date: Jan 2016
Posts: 2
Default Having a height "stretching" issue that is so simple its driving me insane

I'm trying to make the "navcon" section/image stretch no matter how many icons are added and its not working the way I would like. The "fa-shopping-cart" icon is being shown outside of the "lexnav" image. Any help is greatly appreciated, thanks in advance.

http://codepen.io/baytes/pen/vGxVpR

Code:
                 <div class="carousel-text">
                   <div class="navcon">
                     <div class="lexnav">
                        <div class="lex_social">
                           <a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x fa-inverse"></i></a><br><br>
                           <a href="#" target="_blank"><i class="fa fa-twitter-square fa-3x fa-inverse"></i></a><br><br>
                           <a href="#" target="_blank"><i class="fa fa-instagram fa-3x fa-inverse"></i></a><br><br>
                           <a href="#" target="_blank"><i class="fa fa-youtube-square fa-3x fa-inverse"></i></a><br><br>
                           <a href="#" target="_blank"><i class="fa fa-shopping-cart fa-3x fa-inverse"></i></a>
                        </div>
                     </div>
                  </div>

Code:
.navcon {
  max-width:323px;
  max-height:100%;  
}

.lexnav {
  background: url("../js/img/nav.png") no-repeat left top;
  background-size:100% auto;
  width:223px;
  height:100%;  
}

.lex_social{  
 /* padding-top: 190px; */
  padding-top: 195px;
  margin-left: 90px;
  height: auto;
  width: 900px;  
  position: relative;
}

@media only screen and (max-width: 420px) {
    /* styles for narrow screens */
    
.lexnav {locate 
  background: url("../js/img/nav.png") no-repeat left top;
  background-size:100% auto;
  width:150px;
  height:372px; }

.lex_social{  
  padding-top: 210px;
  margin-left: 105px;
  position: relative;
  }
}
Thanks,

Brad
baytes is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:55 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.