Question

I’m making a little vCard using twitter as a bootstrap and I encountered a small issue that I’m not able to track it’s source 🙂

If you follow this link : Demo ; you will see that elements are kind of messed up 🙂 In the header of the vCard the contact information should be on the right of the name and thumb, but it’s pushed underneath. The same goes for the small description 🙂

Using row-fluid instead of just row will fix that, but because my mobile version needs not to be fluid I cannot use the fluid grid. I hope someone encountered this issue before and has an idea what is the source of it 🙂

Answer 1

If you really want to make it work nice on mobile devices, you should really consider the css properties of the class content-view-container: you have absolute positioning and fixed-value width that don’t play well when you want to design for “any” screen size…

There are some issues in the code:

• first of all the span2 and span12 shouldn’t be “pulled-left” (there is also a typo in the class name) and “pulled-right” (it makes useless the meaning of “grid”…)

• all the style of info-button-container are redundant (just keep the margin-top)

• in info-button-inner why are you using border-box property? to fix the position of the icon in the middle play with the line-height attribute

• why setting all the divs as position:relative; display: block;? no use here…

• row doesn’t need the class clearfix as it is already “clearfixed”