I am using react-responsive-carousel and when I switch to mobile view, there is a bunch of white space below. I have tried everything I can think of to remove this including body { overflow-x: hidden }. When looking in the dev tools, is appears to be the ul.slider.animated .
Displaying white space below image carousel
Here is a codesandbox with my issue reproduced.
Update:
I've just had a look through your example and it's not the same issue I had, so my answer below doesn't apply to this particular question.
Regarding your actual question, I think this is more an issue of responsiveness in general as opposed to anything specific to react-responsive-carousel. The reason for the whitespace is because you've hardcoded the height of the carousel slide to be 90vh so there is only a small range of page sizes in which the aspect ratio of the carousel slide is compatible with that of the image leading to no whitespace below the image.
Here's my solution, although it means the footer is no longer fixed at the bottom.
Remove min-height: 100vh; from .page-container in styles.css
Remove height: 90vh; from .carousel .slide in carousel.css
Remove .carousel .previous { height: 90vh; } from the media query at the bottom of carousel.css.
This will no longer restrain the carousel to a fixed height and will remove the whitespace by allowing the footer to always join the bottom of the carousel. If you do really want the footer to be at the bottom, then another possible option is setting position: fixed; in footer.css and using portrait images when you switch to mobile mode. But again, you'll have to mess around with scaling and aspect ratios though not to the same extent as with only landscape images.
Old (and irrelevant) answer:
I had a similar issue and what worked for me was setting the showThumbs prop to false like so:
<Carousel showThumbs={false} />
For extra info, the bit you're looking for in the dev tools is the following:
<div class="carousel-root">
<div class="carousel carousel-slider">...</div>
<div class="carousel">
<div class="thumbs-wrapper axis-vertical">...</div>
</div>
<div>
That <div class="carousel carousel-slider"> is the main bit where your content sits and the <div class="thumbs-wrapper axis-vertical"> is probably for a row of thumbnails. Setting showThumbs={false} removes that second div.
Related
How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/
I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.
I'm looking for a way to make sure the height of a scrollable, fixed element adapts to fit all the whitespace down until the footer.
Please see the following fiddle which is the layout I'm working on.
Been stuck on this for 2 days, it's about time to move on.
Better to see the fiddle in firefox, sidebar scrollbar not scrolling in chrome for some reason but that's a different issue.
<header></header>
<div id="platformContainer">
<section id="platformContent">
<div id="platformBody">
<ul class="mainList">
...
</ul>
</div>
</section>
<section id="toolBarContainer">
<div id="toolBarContent">
<ul id="toolBarList">
...
</ul>
</div>
</section>
<footer></footer>
Assuming you want the toolBarList container 100% height - this is what you already have. The sidebar is 100% height. The list within, however, is only set at 200px:
#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
height: 200px;
...
}
Changing that to height:100%; makes it fill the entire height of the document. The problem now is accounting for the header and footer. This is a common question, however, and I've answered it myself here: https://stackoverflow.com/a/14892331/1317805 as have many other people. You'll need to ensure that the header and footer aren't hidden by or covering the content area.
I think you might need javascript to do this – 9edge
Not at all!
Also, please note when using section tags:
Use of the element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.
Your #platformContent and #toolBarContainer styling may yield unexpected results.
http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
In fact, your styling of those sections can be completely replaced with:
#platformBody, #toolBarContent {
position:relative;
height:100%;
top: 70px;
width: 100%;
}
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed
I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick). The width and height of the sidebar will vary from page to page so I can't use any hard values.
My css looks like:
#main {
width: 850px;
height: auto;
}
#sidebar {
width: auto;
float: right;
}
(plus some padding, margin, and background color code I think is inconsequential)
My html looks like:
<div id="wrapper">
<div id="header"> /* header stuff */ </div>
<div id="nav"> /* nav stuff */ </div>
<div id="sidebar">
/* my sidebar content, really just an h3 and a ul */
</div>
<div id="main">
/* lots of content here */
</div>
</div>
I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8. But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).
I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers. But I have no idea how to fix it.
Any ideas? TIA.
First, make sure you are using a doctype that will put IE7 into strict mode (see http://hsivonen.iki.fi/doctype/ for an explaination). if that doesn't do it, it may be that you need some play in your margin widths.
The reason why you have to have the sidebar div first, is since div is a displayed as a block element anything after it, will be below it (unless you float the main div).
By floating the sidebar div and putting it first, the browser knows it can display the main div to the right of the sidebar. You could get a similar effect by adding float left to the main div and removing the float from the sidebar div and moving it after the main div.
From what you describe, it sounds like your sidebar is behaving as if it was a block element. Maybe try some different display options like inline-block. I'd also try experimenting with the width min-width attributes. Hard to say though.
Bingo! Fixed! The guys who mentioned playing around with widths and margins get the gold stars tonight. It turned out that all I had to do was remove the fixed width on the main div, then add some padding on the right to create a gutter for text and images. Tested and confirmed in FF3, Chrome, Safari (Win), and most importantly, IE6 & IE7 (even though I still hate IE).
I guess the IE rendering engine was saying, "I see that you want your main div to be 850px wide, but with that sidebar you stuck up there, I don't have room so I'll have to shove it underneath the sidebar". Of course, every other browser's rendering engine said, "Dude, I totally get what you're trying to do! No problem, I'll lay out everything exactly as you'd like it."