I have run my website through the device bar on the dev tools and there is a horizontal scroll there (together with a locally hosted WP site). I tried browsing it in my device but there is no actual horizontal scroll - it only appears on dev tools.
What can possibly cause a horizontal scroll in dev tools but not in the website itself?
Remove the min-width: 320px; from .hero-container it causes problems on small screen devices which causes extra padding on the side. Remove width: 80% and set it to width: auto instead.
Related
I'm about making a responsive blogger template. I developed it in Chrome from scratch but when I opened it with other browser, in this case is Ms Edge and Internet Explorer, there's a little problem. When I resized the window to mobile size, the horizontal scroll shown. So I tried to open in Android Browser (not Chrome) on my phone, the horizontal scroll is gone. Is this from my code or Ms Edge itself?
The horizontal scroll shown when the window resized
If you want hide only horizontal scroll, put this in your css:
body {
overflow-x: hidden;
}
You can add a simple body {overflow: hidden;} to your css to block out the scroll.
Is it what you wanted ?
I've found great advice by #Bojan Petkovski how to make a bxslider full screen:
Making BXslider full screen (filling entire browser window)
But I've encountered a problem running bxslider with parallax effect and few JS scripts (enquire, skollr). I think that they produce the problem. But I could be wrong.
Here is the website: http://tedxmru.com/
Once the browser's window is resized to it's smallest(making it narrow) width the slides doesn't resize proportionally.
As I've tested and if I'm not wrong this rule isn't working on resize:
.bxslider, .bxslider li{
height: 100% !important;;
}
Second problem once the window is narrowed and I hit refresh - the slider disappears, while I haven't written any media queries to hide it.
Need help fixing it with resize issues
Try this:
.bxslider, .bxslider li{
height: 100vh !important;
}
I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.
I have a web application and in one of the div's I'm using CSS to show an image over image (using: position:relative; top:-100px;). Due to that I get a white gap in the bottom of the page (of where the second image should have been), so I used overflow: hidden; margin-bottom: -100px; in my div, to fix it. It works great when I'm running it in chrome emulation but it does not work when I install the phonegap application on my phone (Nexus 4).
Is there anything I can do to make it happen with phonegap?
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
I'm trying to create a PhoneGap Windows Phone 7 application. In order to imitate an Application bar that should always be visible at the left side of the screen in landscape orientation, I wanted to place a <div> with CSS as position:fixed. This does not work, however, because the IE on WP7 seems not to support it.
Does anyone have an idea how I can display such an Application bar without having position:fixed available?
Thanks in advance
I was also hanging on this problem. It really seems not to be possible to create a fixed element and to position elements after every scroll looks even worse (try the jquery mobile online examples on your phone they do it this way).
I "solved" the problem by using a div container for my non fixed content with style="overflow: scroll" and fixed size. This worked for me. But scrolling in this container doesn't look like native scrolling.
Hope that helps
I've managed to solve the problem on my Win phone 8 (Lumia 930).
I have a modal window and when opened on mobile should stay in view point and scroll inside. Android and iphone worked fine with position fixed but win phone didn't.
My solution was to put active class on html when the modal is active and add this to css:
html.modal_active{
overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;
body{overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;}
}
This positioning html and body to absolute when modal is opened solved the problem. Hope it helped!