Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to reach the following result:
I need left col-md-3 to stay always 100% height and always on screen - it's a menu.
The right side is as usual with scrolling available etc.
Thanks in advance!
Using bootstrap in this situation may not be your best solution. I love bootstrap however you don't need to use it for everything and this may be the case here, however I'm sure you could make that work.
Draw your page layout as you see it working and see if your idea of a sidebar suits the bootstrap 'grid'. Does it make sense to have all of your content wrapped in a row that is 100% the height of the screen?
Really it sound like what you want is a sidebar div with with absolute positioning set to 100% screen height. To make it responsive just create some css media queries to handle that.
Your content div on the right you can build up with bootstrap as you like.
Here's a link to a similar problem with an answer:
Creating a fixed sidebar alongside a centered Bootstrap 3 grid
Hope it helps!
Bootstrap has a plugin called Affix which can be used to accomplish what you're looking to do.
But, generally speaking you can use position:fixed for this and don't need to use Bootstrap at all.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am always confused which one I should choose whether margin or position(relative, absolute) in making a web page responsive.
For example , I have an HTML element , now to align it properly, I can go for either margin/padding or Position, but I always think that which will be better to use so that I don't have to write lot of media queries for different devices .
Any help/advice is aprreciable !!!
Each property has their own usecase. but in responsive perspective
i feel padding would help more like in some case you simply give padding instead of element height and width.
Position/margin relative/abs is completely depends on requirement.
after that you can use % and em as well.
for me, position absolute and using top left or etc is troublesome, especially you will do the floating things between 2 div/section like my post here:
The never answered question
same does with margin and padding, you should know your own width and height divs, but it will too complicated when you turn into a responsive, you should set your width and height again.
the best thing to do responsive website i think you should follow the website structure. keep inside the wrap div or section.
in order to create the mobile view or responsive design you need the great media queries order, it help you to fit with a regular screen device like(iphone 5, 6 or ipad) but you have to consider that now market is in android. and android phone growing so fast and you can't learn what the resolution is(you won't update your media queries over time right?).
bootstrap
it typeless but it only 12 grid system which you can't manage a navigation with 7 menu, you should modify it by yourself.
flexbox
flexbox is good, you can maintain your container and you don't need to do using float and clear both.
like i said, it depends on your media queries. it's not about position or margin/padding, it's about everything in css.
if your question is only all about alignment, you can start using display flex with justify-content and align-items in parent div or section, this way you won't bother with what is your parent div's width and height.
cheers, might it help to understand :)
Position is not better for responsive design. It is useful but not recommended to use in place of margin/padding.
For example when you use position:absolute; on an element it takes that element out of normal content flow and adjusts its position only according to it's relative positioned parent element. If you use it too often, it is gonna create problems for you.
And responsive design is about using float
In short position is not to be substituted formargin/padding.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a border on the following website http://geertsprengers.be/ under the logo's of the nav.
Now the problem is that when I'm on the mobile website and there are 2 lines of logo's, the border should change the same as the arrow, below the clicked logo.
What is the easiest way to accomplish this?
Could you please provide some more information on what exactly you want to happen?
From what I could gather you want the border that is below the logos in your nav, to stay below the logos when the browser is brought down to a mobile size (when your logos go onto two rows)?
If this is the case you will simply need to do two things:
Change the float: left you have on the logos (li tags) to display: inline-block.
Change height: 54px you currently have on the nav to height: auto.
The problem is the you were trying to keep floated elements contained inside an element with a fixed height, which won't work in your case here. Instead you need to remove the fixed height, which will allow the nav to expand to fit the floated elements when they break up.
Hope this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I hope someone can help me with this, I've been searching in my CSS whats wrong but can't figure it out.
If you look at this website: http://viversa.nl/v2/index.html , and click a bit threw the pages, you'll notice some jumping between sites. You'll notice it specially if you click from 'Projecten' to 'People' and back.
It seems "HOME" and "PROJECTEN" are the same, with both a good layout. Next to "OVER ONS", "PEOPLE", "CONTACT" and "SITEMAP" which have a good layout together aswell. But I can't figure out whats wrong and how its possible its jumping, since I simple copied the menu + logo pages + css.
Hope someone can help me out with this!
Thanks!
Sincerely, Stefan
The problem is that the project-page is longer than the screen, thus causing the vertical scroll-bar to appear. Since you are centering the layout and the scroll-bar takes up 20px or so of the space used for your site, what is considered as the center will "move" slightly when the scroll-bar appears.
To get rid of the jumping, you can force the vertical scroll-bar to always be visible:
html {
overflow-y: scroll;
}
The difference is the browser scrollbar. Short pages that don't require scrolling have a slightly wider space available to them compared to longer pages that can be scrolled.
Seems like you got too much text for your images that are only 410px in Height, maybe delete some text or make your background images longer and added some min-height into the CSS?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
It's a type of layout that has fixed lengths at the edges, but the main content container is fluid.
I made a jsfiddle here http://jsfiddle.net/JyXtR/3/
I just can't get it and I don't understand why.
What I want to get is this
http://i.imgur.com/VPzWE.png
The main content, and content on the right's containers should be the same height regardless of how much content is in them.
Am I really bad at this or is CSS not suited for these types of layouts where they take up an entire page at all times?
Demo. Use display:inline-block;, and adjust the width of both objects. I manually set the height of the main div to 300px for presentation purpose. Note that your inner objects have to use less than height:100%, since main won't scroll.
Maybe it's possible to set a height attribute to a display:table-cell element, but the given solution should work in your case.
Update: http://jsfiddle.net/22D4F/4/
Check it now. But there is one problem, because it cannot be solved only with css.
The problem is layout not work properly if sidebar is longer then content. It cannot be solved without javascript, so YOU MUST SET min-height of content div to sidebar content height.
http://jsfiddle.net/DvaWk/
You need to 'float:left' your chat div and set the online users div to 200px;
EDIT: Also add overflow:auto to #main.