Website structure changing when I change pc - javascript

I made all the webpages in html5, css and js and used google chrome to see the result.
When I change the pc for example, the structure of the webpage changes completely...
I think it has something to do with position relative and absolute but not sure...
Here it is sample fiddle, the webpage for now is just 5 images that I can navigate with 4 keys from keyboard,
sorry for my english...
Can anyone help me?

Are the screens different 'sizes'. Check the resolution of the displays. That's most likely your issue.
It sounds like you're positioning your elements based on the size of your screen. This would be fine if everyone had your screen.
If you could provide your code, I could further assist on how to remedy your situation.
In the meantime, try reading more into css positioning: http://css-tricks.com/almanac/properties/p/position/

Related

CSS properties not working on certain mobile devices

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.

What Scrollbar JS library does everybody use?

I can not figure this out.. looking all through the source files, etc.
Github, Google, and Stackoverflow ALL use the same scrollbar js library, whatever it is. Just scroll real quick and you'll see.check out a picture here if you need to
Can somebody PLEASE tell me what this is?! It's obviously not CSS, it has to be Javascript and I've been spending hours looking for it..
Note that the picture I linked to is what it looks like when you manually move it with your mouse. Otherwise it's black, a little skinner with no background on the track. The track is transparent.
That's the default scroller for Chrome on a Mac computer. You'll find that's how it is on every website by default.

Why does my website show lag in Chrome when I scroll?

I'm facing this problem only in chrome. When I scroll up and down, I'm facing lag. This only happens in Chrome browser and I have the latest version. Website is based on PHP framework. Could anyone please identify the problem? Is there a problem with the website or the browser? Here is the website link: http://airfuz.com
Thanks in advance.
I would say that one cause is the massive image in the center. (the guy with the google glass) - this image is more than 5000px X 3400px+ but scaled down to around 500px. Which is together with other large images on the page. http://airfuz.com/Images/2014/05/man-wearing-google-glass.jpg
when i remove that image, it scrolls much smoother...
Consider using a php thumbnailing script (like timthumb or phpthumb) to actually serve images close to the size they will be shown. This will also benefit the load times of the site.
Your website has too large assets that simultaneously loads. Maybe that is the cause of the problem. Here's why I've concluded with this answer:
When the website's assets are loading, the scrolling lags. (Tested with Chrome & Firefox)
After the website has fully loaded, my Google Chrome shows less lag. While on the other hand, Firefox showed me no difference at all.
You could shrink down some assets, I think that will, somehow, lessen the lag.
And I noticed something about your website, you are using the HTML5 Doctype. However you are also using HTML4 Mark-up Tags (I saw the <center> tag). Well, this might not affect the problem but this will affect HTML5 Validity. =)
Well, hope I helped somehow.
Google Chrome notorious bug Issue 753053

iOS Positioning fix

I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.
The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.
Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..

HTML / CSS layout broken using jQuery mobile

I have a big problem with the layout of a webpage designed for iPad and normal PC displays.
I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
I already have this layout designed with HTML / CSS and it works in every common webbrowser (Firefox, Safari, Chrome - IEx is not relevant for me):
http://ud05_188.ud05.udmedia.de/spotlight/webpage.html
But now I integrate some jQuery mobile stuff and the layout is broken.
You can see here the website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html
They div areas are overlapping and it seems that the jquerymobile JavaScript file is the problem.
So how can I identify where the problem is located? What's going wrong here?
Thank you in advance for your help!
Best Regards Tim
I didn't yet look into multi-box layouts with JQM, but what I can already suggest is:
See if it can be done with JQM settings. JQM might have special attributes for your controls. Or you might need extra wrapping divs.
Add margins/paddings to your CSS. Adding rounded corners often produces extra width for elements.
And if you manage to figure it out, please post it here as an answer to your own question.

Categories