I'm a novice web designer. For a friend, I recently customized a site from a free template. At the top of the page is a JS Image Slider, which appears right as rain when a browser preview is done via my WYSIWYG tool.
However, the slider disappears completely once uploaded. Nothing is present in that space and the content below the slider is pushed upward. Unfortunately, I lack the necessary skills to troubleshoot this issue. What do you need from me to help?
The web address is http://www.michianamemories.com
The CSS rule:
.ps_container{
display:none;
width:656px;
height:345px;
margin:20px auto 80px auto;
position:relative;
background:url(../images/slider_bg.png) no-repeat center;
}
Is setting the div with class ps_container's display to none, when I remove that display:none in my browser inspector the photo slider will appear.
Related
I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)
We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?
Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/
I'm revamping an old/existing website and creating a mobile version in the process. If you view the site in mobile (or via mobile dev tool emulator), you'll see that the main image slider div is responsive, but for some reason, the images inside are not, despite being targeted like this:
#slider img {
max-width: 100vw;
}
I have a feeling this has to do with the way Nivo Slider chooses (randomly I presume) slides, and hide/shows them? Don't have much experience with the plugin, so any help would be appreciated.
Cheers.
Sorry to answer my own question, but this turned out to be an issue of out-of-date scripts. I grabbed the latest Nivo Slider script from GitHub, threw it in, and everything is working fine. Apparently responsiveness was built into the plugin sometime between the script I had and the latest (3.2).
I am using the jAlbum program with the Lightflow Skin to create a gallery. Works well but when I attempt to navigate the gallery on my laptop and the images will slowly creep up and the titles will disappear. I cannot replicate this issue on my desktop, however, my screen size is large enough that the max image size does not override the screen size. This happens in Firefox (multiple versions) only. In Chrome and IE it displays correctly. Also the Close X is off to the left a bit too much (In all browsers on laptop only).
It would appear that the script is calculating the top property incorrectly.
Here is a bit of code:
<div id="lightwindow_container" style="height: 469px; width: 532px; left: -266px; top: -235px; display: block; visibility: visible;">
For the photos that go off the page if I change the top property I can make it fit the page without issue. (By changing it in Firebug when looking at the page.)
Here is a screenshot showing the issue:
Here are the page(s) in question.
How do I check and see if this is a script error or simply a local browser issue and how do I fix it if it is a script error?
Note: I would add the code but there is so much code it will reach the max limit allowed here in SO.
I have installed the Faceook like and recommend box on my site and choose the dark theme version of the code which is supposed to have a white background. However as you can see in the screen shot the background is white.
The preview version of the code on the Facebook website displays correctly (white background.) I'm assuming something there is some CSS on my site that is overriding the background. (Which is strange since this is an iframe, I don't see how that could happen.)
You can check out what is happening on my side bar, and here's a screen shot. (The background should be white. The same things is happening on the recommend box also. screen shot http://noahsdad.com/wp-content/uploads/2012/07/Screen-Shot-2012-07-10-at-6.46.30-PM.png. Thanks!
Why dont you try
.fb_iframe_widget {
background-color: #fff;
}