could you please help me out with the following problem?
context:
Let me start of saying I'm a amateur / hobbyist webdesigner, far from anything professional. I've been busy making a website for my business. The portfolio section contains a horizontal mousewheel scrolling section, so the images read from left to right.
I have made the website with muse, and implemented some custom CSS and JS code in there to make the horizontal scrolling happen. my knowledge of JS is limited.
problem:
Everything works fine, except in safari. Here the horizontal scrolling doesn't work. This has to do with overflow-y:hidden I have set at html and body. If I remove this, the scrolling works in safari BUT without the overflow-y: hidden, the website will not show properly in responsive mode as it will exceed the content height, showing a big blank space underneath the content where the user can swipe down to. I tried a lot of things but unfortunately I feel I'm at a dead end. Could anyone please help me out?
goal:
desktop mode: allow horizontal mousewheel scrolling in safari
responsive mode: don't show big empty space beneath content
website URL:
http://www.jellevdvegt.nl/kam.html
Related
Testing this current project I'm working on (http://hp1.icorp.net/datatv/mwc/index.html) and it's fine on desktop but on my iPhone 6, the page loads but I can't seem to swipe downwards for more content. I'm wondering if it's because I'm using the Skrollr JS scripts to add parallax and other animated effects to the site.
The good news is that the navigation does work, so it does point down to the right portions of my one pager, but because there are animation opacity effects added, I can't see my content without swiping.
Never mind. I found out to make it work on iOS, you have to add another div or section tag with the class of 'skrollr-body' to make that work. Sneaky!
Having a weird issue that I'm not exactly sure how to fix.
I am using a jQuery lightbox gallery called "Fancy Gallery" for my portfolio images (found here: http://codecanyon.net/item/fancy-gallery-jquery-plugin/157532?ref=radykal&ref=radykal&clickthrough_id=643194202&redirect_back=true )
The issue I'm having is when the website is viewed on tablet or smart phone sizes.
When the user goes to the "Portfolio" section and clicks on one of the thumbsnails while the width of the page is say 500px, the header extends causing a shift in the site.
You can see this by looking at the following link: http://www.colorthegrayscale.com/CTG%20Developer/index
Any help with this weird glitch would be greatly appreciated!
There is a horizontal scrollbar that is always visible (chrome 48.02xxx). 2. Using Chrome developer tools, deleting the <svg> node eliminates the horizontal scrollbar. My best guess would be checking if svg.min.js is the blame. I hope this points you in the right direction.
I made a website for a local business in my area, but I found a issue on Chrome and after extensive googling I haven't found anyone else with it. The page works perfectly on Firefox and IE, but fails in Chrome.
The page:
http://elsolsaleparatodos.mx/
The issue:
Modals (Click a white circle with green drawings in the parallax to toggle) flicker above the parallax, or disappear instantly. This also happens with the mobile collapse menu. When the screen is resized making the collapse menu appear, open said menu and scroll down until a parallax comes into the viewport, the menu then disappears.
What I have come with so far:
Commenting the $('.parallax').parallax(); line on app.css fixes the issue, but breaks the parallax of course.
I have tried:
- Changing materialize.min.js to the newest materialize.js
- Checking for loading any plugin twice
- Reading the materialize's parallax function for any... anormalities.
I haven't even found a remote lead, and the issue is non-existent in any other browser so I'm out of ideas.
I was not able to find the source of the problem or why it was only present in Chrome, but I fixed it by adding the following code to my CSS:
.modal {
overflow: visible !important;
}
The modal has stopped flickering and now functions correctly.
I am trying to design a new website for myself but coming across some big problems when trying to make it compatible with smaller devices.
When running the website at larger resolutions and everything looks fine, until you start to drop it down to mobile and some tablet sizes. When the window becomes smaller, I lose content at the bottom of my website, the scroll bar does not go any further. I can kind of fix this but then I get a horrific horizontal scroll bar that is filled with no content.
See image: http://i.stack.imgur.com/98ZzF.png
I have tried using all the overflow methods but still cannot find a fix.
Link to website so you can view for yourself: Website
overflow-x should fix your issue.
body{
overflow-x:hidden;
}
I am having a scrolling issue with Firefox. I have a JavaScript game that responds to the user's browser size. The game works well with Chrome, etc... But with Firefox there is a scrolling issue.
My game is located here: http://beta.retandoclaro.com.mx/home/play/fr_game/flyingdog/
This game is meant to be played on a mobile phone. The problem is with Firefox, if the phone's screen is small, you have to scroll down to click "Play." When you click Play, it removes the div with the play buttons and shows the actual game. However, Firefox creates a problem where now there is a lot of scrolling because its trying to hide the address bar. The game automatically re-sizes to accommodate the width and height of the user's phone.
I am not really sure how to explain this, so I apologize if I am not making much sense.
I have tried to disable scrolling all together. However, none of these worked for this issue:
html {
overflow: hidden;
}
body {
overflow: hidden;
}
I want to disable scrolling, but I also need to make sure the Play buttons are visible. Is there some JavaScript I would have to write to subtract the height of the address bar from the body so that it all fits in the phone's screen without scrolling?
Thanks for the help!