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.
Related
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.
I have a flexbox in a side navigation that is overflowing it's granparent's height. The basic structure is:
<div class="holder">
<div class="block-item">content</div>
<div class="flex-nav">
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="flex-row"><img src="#"><img src="#"></div>
<div class="block-item">content</div>
<div>
.holder { height: 100vh;}
.block-item { display: block;}
.flex-nav { display: flex; flex-flow: column;}
.flex-row { flex: 1 1 0; display: flex;}
img { max-width: 100%;}
Somehow the flex-rows are not shrinking to fit their grandparent's 100vh. Instead, the images are going outside of the view port. From the articles I've read, I'm not sure if a grandchild takes into consideration it's grandparent's height restrictions, though I'm assuming it would. The actual code is slightly different and can be seen in the following codepen:
http://codepen.io/strasbal/pen/zNEMpj?editors=1100
However I'm not sure the exact specifications of Codepen's viewport, it may not show when changes are put into place, so the site url is http://www.webhosting-issues.com
I forked your pen.
Comments are included in the new pen that say /* NEW! */ to help you keep track of what changed, but, basically, since you had already set the height of the overall container at 100vh, I simply assigned a height in vh units to the header and footer that let them maintain the heights they already were, and then did the math to fill in the heights of other child elements.
Overall container is 100vh
Header logo and contact footer are 19vh each
That leaves 62vh for the middle section, made up of three rows
That's 20.666vh per row in the middle section
From there, just set explicit heights for the images and their wrapper links for the inner rows, and you’re was good to go.
One problem you run into is that the text in the links by the images can run out of their container on smaller screens. You could fix that by putting them inside spans and positioning them on top of the images, perhaps with a semi-transparent background.
Hope that works for you.
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 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
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.