CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Roland
Roland

Reputation: 9701

Bootstrap span issue

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 :)

Upvotes: 1

Views: 360

Answers (1)

Roberto
Roberto

Reputation: 2236

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"

Upvotes: 1

Related Questions