I'm developing a website and there is white space on the right hand side of the home page. I know it's something to do with the image slider as it only happens on the home page where the slider is.
See here: Home Page
The issue is most noticeable on iPhone's and but desktop browsers add a scroll bar. On browsers you will notice that when you hover over the slider the scroll bar disappears.
The slider has been customized so the images are background images so they can be centered on the page.
Any help is much appreciated
Sorted it now!
It was the .flexslider:hover .flex-next and .flexslider:hover .flex-prev that had some CSS applied to them: left:-38px; and right:-38px;
Related
In my application, in a page I have a carousel in toolbar, to have a top fixed position.
The Carousel is not visible until I put a position:fixed in a div containing the carousel.
In this page I have a sliding menu too.
When I slide the sliding menu, the carousel remains fixed in the view, over the sliding menu, instead to swipe right in the page.
I experienced this problem in Android default browser and like a builed app in Android. In the desktop browser (Firefox and Crome) it's all ok.
How can I solve this problem?
I solved my carousel issues with the sliding menu just by containing in in an column. If you have to, you may have to adjust the width to be under the set for the sliding menu. It may even work with width being set at 100% but, putting it in its own column or row helped me out a lot avoiding those overlapping issues.
Example:
<ons-row><ons-col width="10%"></ons-col>
<ons-col width="80%"><br /><h4>Carousel</h4>
<ons-list-item>
<ons-carousel swipeable overscrollable auto-scroll style="height: 50px; width: 100%; align: center;" initial-index="0" swipe-target-width="100">
<ons-carousel-item class="button--menu">
Item 0
</ons-carousel-item>
<ons-carousel-item class="button--menu">
Item 1
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
When app bar is present, the height of the app bar affects the content on the rest of the page.
For example, if the app bar has a Height of about 25px when ClosedDisplayMode="Minimal", the rest of the content on the page (rootGrid) would have its actual height of Screen Height - 25px. So the app bar is not overlay on page content.
This is visible especially when the content is VerticalAlignment="Center" or Bottom.
Is there any way to avoid this? Something like a ZIndex on the AppBar so that it is displayed over the page content and not trimming it on the bottom side of the screen.
It is possible to tell the renderer that the whole "window" should be used when rendering and not just the visible part. By calling Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow) the renderer will include the areas beneath the chrome of the window (ie the system tray on top of the screen and the app bar at the bottom). The chrome will always be on top of whatever is rendered from xaml.
ApplicationView is documented here.
If you don't want the system tray on the top of the screen to overlap the content, you'll have to compensate with a margin on the root container of your visible xaml.
I'm confused as to why the navbar does not collapse at its default breaking point of 768px.
In bootstrap's own example the navbar does not collapse at 768px.
I'm having a problem with this on my own website, and went and tested on bootstraps examples.
I tested bootstraps example page here in this screen emulator. I also tested on a real ipad. Both do not collapse at 768px.
IPad - Screenfly
Bootstrap navbar collapse at viewport width 767px, this means your window width is 781px. If your viewport width reaches 768px or any higher value, your navbar will be displayed normally like you see it on any desktop.
Width viewport 767px
Width viewport 768px or higher
You probably was confused by the window width, anyways, if you want to display the viewport and window size like i did in those screenshots, you need web developer addon for firefox, you can also see it in the screenshot, all you need to do is to press on that Resize button and pick Display Window Size but it also has other cool options like View Responsive Layouts or Resize Window.
Hope this helps.
I have a relative div above a fixed one which acts like a navigation bar.
I want to be able to scroll past the relative div before the fixed div starts having to scroll here is my website.
as you can see from just scrolling on the site the sidebar doesn't work as intended.
Try using JavaScript to detect the scroll position of the window and then change the CSS to start scrolling like a fixed div.
Another tip, the the fixed div which contains your projects on the home page lays over your footer when you scroll to the bottom.
Use JavaScript to detect if the user is at the bottom of the page or not and then set the CSS of it to have a margin from the bottom of the page.
Hope I helped.
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.