floating elements swapped

Question

I have wordpress page http://war-mobile.h2client.com/corporate-information/our-team/ and am developing a mobile website for it. If you go to the bottom and click on switch to our mobile you will see that the image and the info div have swapped places - I copied the style from the original site as far as the image and the floating div go, but am having this problem. Code:

.bios div {
font-size: 16px;
line-height: 20px;
margin-top: 25px;
margin-left: 35px;
float: left;
display: block;
}


.bios avatar {
display: inline-block;
float: left;
width: 130px;
height: 165px;
margin-top: 0px !important;
}

Please provide a simplyfied example on http://jsfiddle.net/ – Linus Caldwell Mar 19 '13 at 19:28 — Linus Caldwell, Mar 19 '13 at 19:28
MY MISTAKE - was missing a dot - .avatar – Dejan Biljecki Mar 19 '13 at 19:30 — Dejan Biljecki, Mar 19 '13 at 19:30

score 0 · Answer 1 · answered Mar 19 '13 at 19:30

0

Add

.bios img {float: left;}

the avatar selector does not select the image in the mobile version

edit:

Infact, the CSS for the avatar class misses a dot

.bios .avatar {...}

thus it is not applied to any element.

answered Mar 19 '13 at 19:30

Raffael

800
7
18

score 0 · Accepted Answer · answered Mar 19 '13 at 19:31

0

It should probably be .bios .avatar (notice the additional period) or .bios img as in the non-mobile version. Either sets the float for the img properly.

answered Mar 19 '13 at 19:31

Explosion Pills

188,624
52
326
405

score 0 · Answer 3 · answered Mar 19 '13 at 19:35

0

A quick fix would be to add this property:

.bios img{
   float:left;
}

But I'm afraid that your divs are way too mixed up.. You will need to clean them up to fix the more button as well..

answered Mar 19 '13 at 19:35

Mustapha

103
7

floating elements swapped

3 Answers3