Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Element moving when on mobile device

Element moving when on mobile device

Problem

I've been tearing my hair out with this one for a whole day so any help/advice is welcomed!

Basically, my new project uses the Detect mobile browsers script, to check if the user is on a mobile device and if so disable the normal style sheet and enable the mobile style sheet.

I have managed to work out most of the kinks with it but for some reason I am having a problem with a content slider in one of the sections, it has two inline elements in each slide, one floating left (text) and one floating right (image). For some reason when the second slide is clicked the image moves down below the text. Usually this would happen if there is no room but this is not the case as there is plenty of room for both elements.

This only happens on a mobile device, so you can actually see what I mean by going to http://beta.residencyradio.com and going to the features section, the current version I have working is for tablets, so it is best viewed there.

My thoughts are this must be to do with something in this snippet of code in the mobile stylesheet (below), but I'm not too sure what.

#feat {
width: 60em;
margin-top: 3.125em;
display: inline-block;
}

.feat_container {
width: 23.4375em;
display: inline-block;
margin-top: 9.0625em;
margin-bottom: 9.0625em;
float: left;
}

.feat_container p {
font-size: 1.125em;
line-height: 1.2em;
margin-bottom: 0;
}

.feat_logo {
width: 23.4375em;
display: inline-block;
float: right;
margin: 0;
}

#feat_nav {
float: left;
display: inline-block;
}

#feat_nav a { 
background: url('../images/dot.png') no-repeat;
font-size: 16px;
padding-right: 9px;
text-decoration: none; 
margin-right: 5px; 
color: rgba(1, 1, 1, 0);
}

#feat_nav a.activeSlide { 
background: url('../images/dot_active.png') no-repeat;
}

#PSM .feat_container {
margin-top: 8.375em;
margin-bottom: 8.375em;
}

#PSM, #banger, #hot, #eclectic, #definitive, #guest {
width: 60em;
}

#guest .feat_container {
margin-top: 7.6875em;
margin-bottom: 7.6875em;
}

Any help at all would be greatly appreciated!

Thanks,

Michael

Problem courtesy of: Michael

Solution

Ok, I actually managed to figure this out after a "light bulb moment". For some reason mobile devices (I have tested on android and ios) seem to have a problem rendering the width of the containing element when the slide is changed, thus forcing the right floated content down.

The fix, simply changing

#PSM, #banger, #hot, #eclectic, #definitive, #guest { width: 60em; }

to

#PSM, #banger, #hot, #eclectic, #definitive, #guest { max-width: 60em; }

And that sorts it out, hope it helps someone!

Solution courtesy of: Michael

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Element moving when on mobile device

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×