I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
Related
I'm using Bootstrap's d-flex justify-content-center on a carousel. The carousel itself has a specified width. Everything is centering fine on Chrome and Firefox but in Safari the element goes over the right side (not centered).
I have tried using padding instead of width, the problem remains the same. I have tried fixed width (px), still the problem persists.
When removing the width of the element it is indeed centered but now the problem is that the element isn't my desired width.
#carouselIndicators{
height:70%;
width: 70vw;
border-radius: 15px;
position: absolute;
top: 15%;
background-color: #f0f0f0;
}
Here is the css code for the carousel itself.
So how do I actually center the element? Because right now it goes off the right side of the screen.
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.
I have a weird problem. The background image (black stripes) in the main container breaks up when the browser window is resized smaller and the user/viewer scrolls up and down (in Safari). The stripes stop stretching down 100%.
#mother {width: 100%; min-height: 100%;height: auto !important; height: 100%; margin: 0 auto; background: url('/img/bg.png') repeat-y center;}
link text
The way to change this horizontally is to set a min-width declaration on the div. Mid-width 100% doesn't work, you need a pixel value.
I don't seem able to duplicate your problem in Safari (or any other browser) vertically - the stripes don't reach the bottom of the page even on first load.
Quite Tricky :)
body { display: table; width:100%}
I'm not aware of a way of directly changing this behaviour myself. Firefox is the same, I think, at least horizontally.
Does it make any difference if you apply the background image to an element that contains #mother? Depending on your page, perhaps you could apply it to the body.