Develop Reference

Can't scroll table horizontally on Android phone

I have developed an interactive table in HTML, CSS and js. It's a simple interactive where students can enter text in textarea and check their answers. The interactive is inserted with inside a course page (in Canvas LMS or Blackboard or Moodle, depending on the course). Everything works fine, except that on Android we can't scroll horizontally to view all the columns of the table (when a large table doesn't fit on screen). It actually works fine on my old Samsung Galaxy 3 but not on newer Android phones.
I know my question and summary of the issue is not quite detailed but I was hoping it's a known issue and you guys have a fix or workaround. Thanks.

You haven't provided any source code to work with, but my best guess is that the table is being clipped.
Try adding table {overflow-x: scroll} in your CSS to provide a horizontal scrollbar when the viewport width is thinner than the table's width.

wix mobile not able to fit javascript embedding on mobile version

i have been having problems in wix mobile website version I have a javascript quoter embedded on the desktop version now how do i make that fit in the mobile dimension? any tips on getting that done www.yourfamiliesfirst.com/tq is where it is i have resized the first page of the quoter where you put in your information and what not. i had to scale the image and push it out of the box to fit the screen, problem is when second page after that loads its not proportional to the mobile version and it looks like the page being displayed is greater than the mobile screen. Please help me out as i have no coding skills to be able to code my way out of it but I'm open to suggestions. Thank you for whoever takes the time of reading this and give me a suggestion much love god bless.

Hey #exodus seems like you're running into responsive site issues. Normally you could resolve it by developing with mobile-first in mind by setting #media responsive CSS.
I'm not too familiar with Wix, however I did find this Wix documentation here which guides you through having a mobile-friendly view and layout.

Viewport issue on mobile devices

I have an issue I'm struggling to overcome. I deployed my site, and noticed that the viewport logic is broken for STOCK browser on Android device. Chrome browser on the same Android device works. Also, iphone6 works, but iphone5 doesnt. I'm dynamically determing the viewport values depending on width of screen.
Here is a test version of the site:
http://spaniard.ca/workVersions/beta/index.html
I can't change the design and layout, and the site needs to be centered in the middle as it is now.
Does anyone know why on on android stock browser it would NOT work, but on chrome on same device would?
anything will help, thanks!

You would have an easier time doing the responsive layout if the hero image was an actual img tag instead of a background image. You can get the background image to not become cropped by adding the CSS:
background-size:contain;
On a side note, you need to make sure that the containing elements inside article#what-is-spaniard have percentage widths.
EDIT:
From what I have seen, this isn't an issue of browsers, just lacking the proper code

Providing solution without seeing the code is quite tough.
Still giving you a suggestion of resolving it.
Just an idea. Try changing the background size in CSS as below :-
background-size: cover;

Masonry plug-in not working in Chrome

I recently took an interest in building websites and am still very inexperienced, so my apologies if this is easily answered.
I was asked by a friend to build her a simple portfolio website for fashion designs. As such, the website mainly has image galleries. The images come in various sizes and rather than ordering them manually to make it look better, I found the Masonry plugin. I implemented masonry.pkgd.min.js into my code (initialized through the HTML) and ran into two issues:
The main issue that might make question 2 moot entirely… It looks fine in IE and Firefox, but the images come up overlapping in Chrome and it looks horrible. I cleared my cache several times and tried implementing the imagesLoaded plug-in, which did absolutely nothing. I am very new to Javascript and as such have to rely on copy/pasting this sort of plug-in whereas someone else might be able to delve in and tweak it, but at the same time I had no issues getting tabbed content and this does work in two browsers. Any idea why it doesn’t work in Chrome and what I can do to fix it?
After the plug-in, I don’t seem to have any control over automatically centering the image columns in the gallery/container and they are aligned left by nature. I more or less fixed this by manually setting a margin-left that puts everything in the right place, but would like to know if there is a better solution.
Please let me know if I need to include screenshots or specific code.

Issue One:
Try adding imagesLoaded. Chrome in particular has an issue if you don't use it with masonry. I suggest trying the solution in the third box first, it's the easiest and fastest loading. This code will go in your .js file if you have one, or in your script tags if you don't.
If the "why" interests you, it's because your containers load before your pictures and don't know how tall they should be.
Issue Two:
You're right on with this one. You can't center the whole masonry container itself (you can get close, but at certain browser widths there will be a small gutter on the right), but you can center the images within their containers by adding a margin like you did or using:
position: relative;
margin-right: auto;
margin-left: auto;

What is causing these browser rendering issues? Z-index conflicts? Positioning rules?

I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.

I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!