I'm building a dynamic site with Bootstrap 3 - part of the brief is to slide in a messages box overlay from the left hand side - which ideally needs to fill 90% of the screen height.
I have added a containing div '.messageBlock' and have written a JS script to toggle the slide and deal with the messaging - the issue I have is figuring out a good way to apply a 90% height to the message block across desktops/tablet/mobile.
So far I have -
.messageBlock{height:90%; position:fixed; left:200px; width:290px; background:rgba(255,255,255,0.5);left:-300px; padding:15px; font-size:1.2em; z-index:255;}
Which seems to display as hoped across most desktop sites on the mac (Safari, FF, Chrome) with the exception of Opera (it disappears over the page fold), but also disappears over the page fold in IE9 on PC. It works in portrait mode on the iPad / iPhone but not landscape where it again disappears over the page fold.
can anyone recommend an alternative approach?
Try to not set height to anything than auto and apply bottom: 10%;.
Here is a fiddle, with altered CSS http://fiddle.jshell.net/T3LmX/2/
Related
I was designing a page, and set the size of a div to 100px (80px height + 20px padding-top).
.header {
height: 80px;
padding-top:20px;
...
}
<body>
<div class="header">
Just another blog
</div>
....
</body>
But when rendering in Chrome, and taking a screenshot, I can see using Paint that the size is actually closer to 150px.
I've got a 144dpi screen, and am not sure if it's related to that.
I would've expected that this would get handled fine since it's the size of a div, not an image.
I also followed the instructions here, which mentioned a bug in Chrome on high-DPI screens. I tried starting Chrome using the flags mentioned there to force Chrome into high-DPI mode, which fixed the issue. But other sites don't seem to have the same issue that post was referring to, so I'm wondering if there's something different I should be doing via CSS to mitigate this?
You can see Chrome reporting the div as 100px tall, but Paint measures it as ~150px
I'm using Chrome 49.0.2623.87 m, on Windows 8.1.
Thanks!
I just jumped into a project that was about 70% finished. The home page html5 video section and general layout of home page look perfect on Chrome and Firefox, but in Safari, giant random margins appear above and below the html5 video header. I realized that adding width:100%; and height:100%; are causing the added margins.
Please take a look and compare them on each browser.
I've tried adding display:block to the video container as well as changing margin to padding.
Many thanks in advance.
I took out width:100% and height:100% and added min-width:100% and it did the trick.
I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width
My website (http://amosjackson.com) uses css media queries to resize the website so that it fits an iPhone screen. When I view the site (on an iPhone 4), a block of background shows through to the right of the header. The header is width:100% and so should be from edge to edge. I haven't properly coded the css for non-retina iOS (it looks worse on older iDevices) so please don't comment on that.
The Problem is the padding: 10px; in combination with width: 100%; in the #nav element. Drop the padding an it should work.
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.