According to the fullpages.js documentation, it should be possible to vertically center the contents of .sections with the parameter verticallyCentered (which defaults to true).
However, I can't get this feature to work with the following HTML structure:
<div id="content">
<div class="section container">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Title</h1>
</div>
</div>
</div>
</div>
The content of the .col-xs-12 div (i.e. the heading) remains at the top of the window.
I am using Bootstrap for scaffolding (if that is of any relevance). Also, the basic functionality of fullpage.js (i.e. the single-page scrolling) is working without any problems.
You are probably using some absolute positioned element and that's the reason why fullpage.js can not deal with it.
You can easily see in the examples that fullpage.js centers the content correctly when using verticalCentered:true, which is the default value.
I had the same issue.
I fixed it by styling the default class, added by fullpage.js:
.fp-tableCell {
display: flex;
align-items: center;
justify-content: center;
}
Since I couldn't get the vertical centering functionality to work, I ended up disabling it by setting verticalCentered to false. As a replacement I am now using jQuery-Flex-Vertical-Center which works out of the box.
Sorry to resurrect this question but the problem is that you didn't include the css file of FullPage.js
Related
New to using Zurb Foundation and starting with version 4, I can't find a way to have the grid aligned to the center on small screens only, and then revert to the default grid on large screens. Are there any native classes supplied with Foundation 4 that can do this?
I've had a look at their documentation on http://foundation.zurb.com/docs/components/grid.html which demonstrates the classes "small-centered" and "large-centered" which do work as intended but there is a line saying
Small versions will carry through all breakpoints if not overridden by a large version.
To me this sounds like I either need to create a class that overrides the center align from "small-center" class on large displays, or that there is a class existing - this I cannot find.
Here is some sample code I am testing with:
<div class="row">
<div class="large-2 columns">
<span>text</span>
</div>
<div class="large-6 columns">
<span>text</span>
</div>
<div class="large-4 columns">
<span>text</span>
</div>
</div>
The grid system functions as expected and intended but I want all three columns to center align on small screens only.
If I do need to create my own classes and styles, is anyone aware of SCSS that may be available to the community already addressing this issue?
It turns out that this is not supported out-of-the box. There is a simple fix though and that is by adding the override as I've suggested in my comment.
#media only screen and (min-width: 48em) {
.column.large-left,
.columns.large-left {
float: left !important;
}
}
Notice the use of em that is the Foundation-standard way of doing things. That should take care of the smal-centered issue. You then just have to add that class to any small-centered elements that you don't want centered. You can see it in action here.
You can't do that with Foundation non-semantic classes.
You'll have to do it manually and (hopefully) semantically:
#media only screen and (max-width: 767px) {
.some-container { text-align: center; }
}
You need to checkout CSS files and search for mediaqueries that are for small screen only and then add properties for that specific column.
I am customizing my website using Twitter Bootstrap. I am trying to insert an image positioned as the top layer, is located slightly "outside of the container", and can responsively resize while staying proportionate / in relation to the other elements. I would like to use position: relative, but the image seems forced into a box within the container. When I use position: absolute, the image displays correctly at first on my web browser, but it does not behave as intended when the screen is resized.
Can anyone help me figure out a good solution to this issue?
HTML: I do not have the image contained within it's own , but is still located within the overall . Here's the code:
<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">
CSS: Here's my custom css.
img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}
I'd appreciate any help finding a solution and/or help with my code / syntax. Thanks in advance.
To design responsive website using bootstrap you can use bootstrap layout.
Fluid layout has class "row-fluid" and you can specify width in using class as span.
this structure will be responsive. to test it just resize your browser window.
<div class="row-fluid">
<div class="span2">
<img>....</img>
......
</div>
<div class="span2">
</div>
......
</div>
Bootstrap devide screen size in 12 part. we can use that part by giving
class="span*"
* is no of part.
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options