I'm using Twitter bootstrap with a project I'm working on at the moment and I'm seeing a white border appear around the main header and footer when I make the screen a little narrower.
You can see the same problem on Font Awesome which also uses Bootstrap - just make the screen a little narrower and you'll see a white box appearing on the right side of the screen at the header and footer.
Anybody know what's causing it?!
Related
I have the following navbar that, when open on mobile, should have a background that covers the entire screen.
The problem is that with my current implementation the contents of the navbar "jumps" down the screen a little bit. I want the navbar-brand and the links to remain where they would without jumping.
See this fiddle for an example showing the code I've tried and the current problem.
Removing the height: 100vh directive removes the "jump", but then the background of the open mobile navbar no longer covers the entire viewport, which is what I want without the jumping.
Thanks for any suggestions!
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
I'm working on adding bxslider to my Rails web project. I have it added sucessfully. However, what is annoying is that even after altering several CSS feautures, there is gray area at the bottom that does not go away. I've tried setting various heights to 100%, but does not work. I also tried eliminating any borders or padding, which still doesn't do the trick. Has anyone experienced the same issue or knows how to eradicate the gray body part so that images fit the entire height of the slider?
Thanks for the comments! I realized that in order to get rid of the grey area, I needed to adjust the height of the iframe itself, and not tamper too much with the CSS related to the images within the slider or any of its contents.
I have the following image:
http://i47.tinypic.com/219zkl.png
That needs to be the background for a .four-columns div in the Foundation framework. The div headline needs to be in the black ribbon, and the content in the box below.
The problem I'm having is getting the background to behave properly as the grid is resized in the browser. I don't want to write loads of media queries just for this background. I've tried using the background-size:cover property, but this leads to it looking horribly pixelated on the phone, and not covering the div correctly on tablet sizes. I've also tried absolute positioning, but that hasn't worked either.
Any help?
Thanks!
This background is too simple to use an image. Just go with pure CSS.
If you have trouble to produce angled borders, here is a simple tutorial>
http://www.howtocreate.co.uk/tutorials/css/slopes
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.