Hi.
I am wondering if someone can help me.
I have some buttons on a page in my site that are driving me crazy.
Here is the page:
http://mattro.se/contact/
The Linkedin and Instagram buttons (divs) are supposed to be side by each, and continue to be side by each until the browser is so small that the containing div slips under the message box. Right now, the 'linkedin button is slipping under the IG button long before the containing div slips under.
Can someone PLEASE show me what im doing wrong here?
Here is the page code:
<div class="row"><div class="span12 well"><h1 class="contact">Pen me a letter</h1>[contact-form-7 id="460" title="Contact form 1"]</div>
</div>
<!--THIS IS THE CONTACT FORM 7 CODE-->
<div class="row"><div class="span4">
<p>Name (required)<br />
[text* your-name] </p>
<p>Email (required)<br />
[email* your-email] </p>
[checkbox WorkEnquiry "Work Enquiry"]
<p>Subject<br />
[text your-subject] </p>
<p class="hidden-desktop">Message
[textarea messagemobile]</p>
<p class="hidden-desktop">[submit "Send"]</p></div>
<div class="span8"><div class="phone well hidden-desktop hidden-tablet"><a href="javascript:void(0)" onclick="window.location='tel:+12505807673'" title="Call me" class="tel"><h1><em class="icon-phone icon-2x"></em></h1></a></div>
<div class="row contact"><div class="span6 instag well"><a href="http://instagram.com/matroas" target="blank"><h1><em class="icon-camera-retro icon-2x"></em></h1></a></div>
<div class="span6 linkedin well"><a href="http://ca.linkedin.com/in/matroas" target="_blank"><h1><em class="icon-linkedin icon-2x"></em></h1></a></div>
</div>
<p class="fredquote hidden-phone hidden-tablet">"The connections we make in the course of a life - maybe that's what heaven is. We make so many connections here on earth. Look at us; I've just met you, but I'm invested in who you are and who you will be, and I can't help it."
~ Fred Rogers</p>
</div>
</div>
<p class="hidden-phone hidden-tablet">Message<br />
[textarea your-message] </p>
<p class="hidden-phone hidden-tablet">[submit "Send"]</p>
And here is the pertinent CSS:
.row.contact {
min-width:100px;
}
.linkedin.well {
margin:21px 5px;
min-height:0;
padding:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
position:relative;
min-width:50px;
}
.linkedin.well:hover {
background:DarkSeaGreen;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
.linkedin.well:hover h1 {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
color:white;
}
.linkedin.well h1 {
margin:0;
text-align:center;
color:DimGray;
}
.phone.well {
margin:21px 5px;
min-height:0;
padding:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
.phone.well:hover {
background: blue;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color:white;
}
.phone.well:hover h1 {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
color:white;
text-align:center;
}
.phone.well h1 {
margin:0;
text-align:center;
color:DimGray;
}
.instag.well {
margin:21px 5px;
min-height:0;
padding:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
min-width:50px;
}
.instag.well:hover {
background: DarkOliveGreen;
background: Tan;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
color:white;
}
.instag.well:hover h1 {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
color:white;
text-align:center;
margin:0;
}
.instag.well h1 {
margin:0;
text-align:center;
color:DimGray;
}
p.fredquote {
font-family:'Reenie Beanie', cursive;
font-size:26px;
color:grey;
padding:0 0 20px 0;
line-height:1.5em;
}
h1.contact {
font-family: 'Pacifico', cursive;
text-transform:none;
font-size:55px;
margin:0 0 15px 0;
font-weight:lighter;
color:DimGray;
}
Please help!!
Thanks so much!
-m
By dreja+
By cstreeting
By adaml44
By Steve Webb+
By shpr
