Databases
StackOverflow2013
Postsdbo
POElement moving when on mobile device
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POElement moving when on mobile device
    primarykey
    data
    text
    <p>I've been tearing my hair out with this one for a whole day so any help/advice is welcomed!</p> <p>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. </p> <p>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. </p> <p>This only happens on a mobile device, so you can actually see what I mean by going to <a href="http://beta.residencyradio.com" rel="nofollow">http://beta.residencyradio.com</a> and going to the features section, the current version I have working is for tablets, so it is best viewed there.</p> <p>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.</p> <pre><code>#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; } </code></pre> <p>Any help at all would be greatly appreciated!</p> <p>Thanks,</p> <p>Michael</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMichael
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODid you make this with some sort of WSYIWYG editor? Why such specific `em`s? Anyway, I don't have a mobile device on me, but I've seen this happen on Android when trying to detect width, and adjusting for it automatically. It would then fire off another adjustment, causing an endless loop that wouldn't occur on any desktop browser I tested with. I don't know if that is your problem, but it does look like you do some of your positioning with JS. Try a raw CSS solution, if possible.
      singulars
      1. POElement moving when on mobile device
      1. USBrad
    2. COlitterally just got it there now dude, the problem was (for some unknown reason) mobile browsers seem to have a problem rendering the change in with `width` set to a specific value. just changed it to `min-width` and that sorted it out. The reasons for such specific ems is to keep everything exactly as I want it within my grid, to the pixel. Why not use pixels you may wonder, well, in short it has made the crossover from the desktop version to tablet (and eventually mobile) versions an absolute breeze, whilst still keeping an almost identical layout.
      singulars
      1. POElement moving when on mobile device
      1. USMichael
    3. COYou're kidding - a 1.5mb single page! And all that browser sniffing! Please get someone with good **web** development skills involved in your project.
      singulars
      1. POElement moving when on mobile device
      1. USRobG
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload