Twitter-bootstrap fixed layout - css

I am trying to make a twitter-bootstrap layout, that has fixed side bar and content.
However, when width of browser window is reduced, content goes under sidebar.

The responsive layout is responsible for most disposition shifting resulting from window resizing. It is activated by default in the examples provided by the documentation.
You can disable the responsiveness of the layout by not including bootstrap-responsive.css as seen in the docs.
Note : the fluid grid has nothing to do with responsiveness. Both can be used independently.

Related

Shiny UI distorted when minimized

So Im making a website and I have included a .css file to be able to move things more freely. I have made some items with position:relative and others I have used the absolutePanel(). I want to keep my layout as it is but when the window is resized it looks horrible. Any suggestions?
You should try to be a bit more specific on your question.
Some general tips though are instead of using pixels for the sizes of divs etc.(static design) use either percentages, vh & vw (view height and view width of the window that are being displayed respectively) or media queries #media (responsive design). To make your life a lot easier with responsive design though check out Bootstrap, and especially its grid layout system.

On responsive site, DIV covers slider but not on desktop

This site I've built at http://www.bridetobe.co.uk/ is doing something odd when I try and view it on a mobile device. I'm using some media queries to make it responsive and what happens when I view on a mobile #sitehead seems to be covering up most of #homepage_slider below(see image below).
From looking at the CSS on #homepage_slider I don't see any absolute positioning making it be in a particular place in this instance.
Does anyone know how I can make #homepage_slider position itself below #sitehead rather than behind it?
Thanks
#sitehead is position fixed so you either need padding at the top of the body (matching the height of your header) to push you slider down or not have your header fixed (make it relative). It works on the desktop as your sitehead is relative.

fullscreen website shows horizontal scrollbar and is cut on the right

I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.

What's the technical definition of this CSS behavior?

Go to the following Foundation CSS framework documentation url:
http://foundation.zurb.com/docs/navigation.php
In the section named Nav Bar you will see an example for horizontal navigation bar. Now try to gradually minimize the browser's window, when the window is minimized enough (to be like mobile devices resolution) you will notice that horizontal navigation bar is turned into vertical navigation bar. I need to know the technical definition for this behavior occurred to the menu.
I believe you are looking for responsive web design; which is design that adapts based on the user agent's viewport.
Twitter's bootstrap framework for example, has responsive design built-in.
I've reproduced that effect using width: auto; float:left for each menu item, and on resize event I'm checking if all the items are aligned at their top. If the items are not aligned, I'm modifying to width:100%
here is an example of what I got: www.gabitzish.com (see menu)

CSS - restricting the container to the height of the browser window (viewable area)

All,
I am writing the CSS for our web application. The whole application needs to fit in the browser window without any scrollbars appearing. I also want to set a min-height & min-width properties so that if the browser window gets smaller than our min., only then will the scroll bars appear.
Is there a way of achieving this in CSS please?
Your problem depends to the screen size of the viewers, which may varies greatly. My propose is that you should create a fix width/height div which is the wrapper of all the content (usually 1024x768).

Resources