I am using the latest version of bootstrap. I have a fullscreen carousel with content inside of it that is vertically centered, 2 issues:
I cannot extend the image all the way, I am missing a height:100%; somewhere in my code I am sure of it but I cant figure out where it should be!
EDIT: another issue I am having is getting my .carousel-content class to extend fullscreen as well (so the content is vertically centered) this works if there is a fixed height on the slider but it is just aligned to the top on the fullscreen version
My fullscreen carousel is not taking the navbar into account so it extends past the viewport. I was able to fix this by adding margin-top:-121px; (the height of my nav/header) but this is not a fix i like as 121px of the image are hidden under the header.
Updated fiddle: http://jsfiddle.net/bwupc7g6/1/
Am sure this will be useful to other users as well if anyone can take a look.
.carousel-inner .item div {
height:100%;
}
I recommend you to use a proper class name for that div since it doesn't have one.
Related
I'm new to Tailwind CSS and have been trying to make a simple portfolio page with available code samples in Tailwind's documentation.
While the container class is wrapping all content on page with some margin, if I set the footer to fixed position, the footer is overflowing to the right. The issue seems to be with the fixed or absolute class as without this class, the footer takes the container's width.
What can I do to make the footer wrap within the container with the fixed class applied? A CSS approach would do but ideally I'm looking for the reason why Tailwind CSS wouldn't wrap the footer to parent's width.
Code and Demo: https://codesandbox.io/s/tailwind-portfolio-s1r1g
Trying to achieve this:
I have updated the HTML for your code and everything works fine. Here is the updated code : Sandbox link
Updates made was -
1. Removed class container mx-auto from body and added as a separate container div.
2. This new div will hold your nav and other contents, except footer.
What was happening earlier -
By default footer was aligning to the left from its parent which was body and as the body was aligning to the center it was displayed as if the footer is right aligned.
If you want to do it from your existing code, you can add one line in css -
footer { left: 0}
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
What I must change to make the navigation bar fixed when screen size under 940px? I don't want to make it responsive. If you resize your browser windows under 940px you will see that scroolbar-x (bottom-scrollbar) appear, but when you scroll it to the right, the navigation bar position still fixed, and some menu won't appear.
Maybe some picture will explain what my problem.
This can't be done in CSS alone.
The example you give (Twitter) has the navbar with fixed position AND fixed size at all screen sizes. Fixed position means that the scrollbars will not affect the position of the navbar, and this is why you can't use the x-scrollbar to see the part of the navbar which, once it's less than 940px wide, is hidden 'under' the right border of the browser window.
So you have to choose, either
Have a fixed position, fixed size navbar which is present at the top no matter how far the user scrolls down and accept that under a small enough screen they won't be able to scroll horizontally to see it all, OR
Have a fixed position, fluid size navbar which adjusts its width to accommodate different screen sizes, which will hopefully mitigate the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit in one row, OR
Have a non-fixed position, fixed size navbar which will respond to horizontal scrolling but will not be ever-present when the user scrolls down the page.
Effectively, you can't have position work one way in the x direction and another in y.
You can see what I mean by option 2 by editing the following classes in the Twitter page using the CSS inspector:
.global-nav .container {
width: auto;
max-width: 865px;
}
.global-nav, .global-nav-outer {
height: auto;
}
The second selector implements the vertical fluidity for once the contents can't fit in one row.
You can see what I mean by option 3 by making these changes:
.topbar {
position: absolute;
/* ... the rest as is */
}
EDIT
Of course, that it can't be done in CSS doesn't mean it can't be done at all. Here's a jsfiddle implementing that script you mentioned. This uses MooTools as opposed to jQuery, which I normally use with bootstrap.
The fiddle: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/
(Thanks to #Sherbrow for providing the base fiddle with which I made this one).
Ran into this same problem and was thrilled with the suggested solution, but then I struggled to implement in my own code (Yes, noobie).
It turns out that there's a conflict here with jquery.js, which I need elsewhere in my code.
http://jsfiddle.net/uadDW/83/
/* code as before .. only added jquery.js link */
Remove jquery.js from the External Resources in the above fiddle and you get the original desired behavior. Rats!
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
I have a css layout where in I have a single page website
the problem is I did not want the scrollbar so i did overflow hidden and the it worked fine but when there is different screen resolution, so content in the bottom is cut off is there any way to work around this
I mean the website should not have a scrollbar when the things fit on the first page but then when there is not enough room for the content the scrollbar should appear
You can use overflow:auto; instead.
My recommendation is to use fixed width and minimum height to your body (or main container)
that way the browser will add is own scrolls if needed. you can read about fixed width here http://webdesign.about.com/od/css/ht/htcsscenterfix.htm
You want overflow:auto; not overflow:hidden;.
overflow:auto; will return a scrollbar when needed, and won't when it isn't.