I want to place all my content within a div that's centered, but has a max width so that the content doesn't expand to be too wide on large screens. Something like this
I thought this would work using flex + justify-center + max-w-lg, but it does not.
<main class="pt-20">
<div class='flex justify-center max-w-lg'>
<h2 class="text-5xl font-semibold tracking-tight text-center text-gray-700">
A Cool Title
</h2>
<p class="mt-8 text-sm text-center text-gray-700">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</main>
(Tested at https://play.tailwindcss.com/)
You can add flex-col to make the center becomes vertical and mx-auto so that it has horizontal margins:
<main class="pt-20">
<div class='flex justify-center max-w-lg flex-col mx-auto'>
<h2 class="text-5xl font-semibold tracking-tight text-center text-gray-700">
A Cool Title
</h2>
<p class="mt-8 text-sm text-center text-gray-700">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</main>
Related
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 1 year ago.
I've been playing around with this issue for a while. Stack Overflow suggested this link to take a look and see if that solve my question but it is not quite the case here, because the is no image related and there is no relative and absolute position involve which I think is key in this approach.
I want to set up an overflow-y when some text exceeds the height of an image in the background. So far I got two approaches:
One where I can center the text but it cuts off when overflow is called.
Another one where I cannot center the text (it stays up) but overflow is working fine.
The following block do not center vertically the text:
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
<div class="overflow-auto h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
The following block cut off the text from the top:
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full overflow-auto top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
Any feedback is welcome.
The following block do not center vertically the text
Why do not center vertically, The last div where you used dumy test you have used class h-full when you used h-full then this div got height 100% and it will take whole space of this parent element.
You have to use max-h-full when you use this then it will not always take the whole space.
Run this
<div class="w-full text-md border border-red-600">
<div class="relative">
<img class="w-full h-96" src="https://i.imgur.com/hAodNjT.jpg" />
<div class="flex justify-between items-center absolute h-full top-0 w-full sm:w-1/2" style="background-color: rgba(255, 255, 255, 0.7)">
<div class="overflow-auto max-h-full">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
I am trying to have a proper-sized card with the horizontal scrollbar in a paper. I've been trying with 'overflow', however, it does not work in this case?
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Cards from './Cards';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
maxWidth: '100%',
overflowX: 'auto',
display: "flex",
flexDirection: "row",
justifyContent: "center"
},
}));
const Dashboard = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
</Paper>
</Grid>
</Grid>
</div>
);
};
export default Dashboard;
This resulted in squeezing cards into a width of 100%. How can I make this scrollable?
The default value of your card is flex-shrink: 1 (Not enough space available? shrink)
The flex-shrink: If the size of all flex items is larger than the flex container, items
shrink to fit according to flex-shrink. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
Next, by default flex-basis is auto + flex-wrap: nowrap; /* Default value */ Items laid out in a single line.
The output:
2 cards => 2 cols.
9 cards => 9 "Squeeze" cols (Like your "buggy" screenshot).
"Squeeze" = No overflow content = No scrollbar.
Shrink Example:
.flex_grid{
display: flex;
overflow-x: scroll;
}
.card{
border: 1px solid gray;
height: 100px;
}
<section class="flex_grid">
<div class="card"><h1>1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>4</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>5</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>6</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
One solution
Add flex-basis (Responsive => use %).
For example:
flex-basis: 40%; (Or use auto - related of the content inside the card).
Disable shrink by flex-shrink: 0;
Working example:
.flex_grid{
display: flex;
overflow-x: scroll;
}
.card{
border: 1px solid gray;
flex-basis: 40%;
height: 100px;
flex-shrink: 0;
}
<section class="flex_grid">
<div class="card"><h1>1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
I want to place my paragraph text on the right side of an image, just like in this mockup:
https://imgur.com/a/ArDIEqH
I aligned the text by setting the display of the parent to flex and it now looks like this:
https://imgur.com/a/wECtedW
The text is dropping on a new line on each word, how can I make it look like in the mockup?
.zodiac-info {
width: 500px;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
width: 200px;
}
.blog-entry-container {
margin-top: 100px;
margin-left: 250px;
}
.blog-entry {
display: flex;
}
```
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</section>
I just update your code with few CSS changes. Try this I hope it'll help you out. Thanks
.zodiac-info {
margin: 100px auto 0;
padding: 0 20px;
}
.blog-entry {
display: flex;
margin-top: 20px;
}
.blog-entry img {
flex-shrink: 0;
height: 120px;
width: 120px;
}
.blog-detail {
color: black;
margin-left: 10px;
}
.blog-detail label {
font-weight: bold;
}
.blog-detail p {
margin: 5px 0;
}
.blog-detail small {
font-style: italic;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
</div>
</section>
use float: left and float: right to move the text and image all the way.
Since both the image and the paragraph are in the same div, you can use absolute and relative positioning.
.blog-entry {
position: relative;
}
.zodiac-paragraph, .test-img {
position: absolute;
}
Try to look at this codepen if this solves your prob.
https://codepen.io/jls314/pen/EJjVzK
You can use css grid or flexbox. You use flexbox, so:
.zodiac-info {
display: flex;
justify-content: center;
}
.blog-entry {
display: flex;
align-items: center;
padding: 1rem 0;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
}
.blog-entry img {
width: 180px;
height: 180px;
min-height: 180px;
object-fit: cover;
flex: 1;
}
p.zodiac-paragraph {
padding: 0 0 0 1rem;
margin: 0;
}
.blog-entry-container {
display: flex;
flex-direction: column;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img"></p>
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
</div>
</section>
You can try this
.blog-entry{display: in-line-block}
I am using a bootstrap 4 card:
<div class="card" style="height:"500px;width:100px">
<div class="card-body">
<div class="top-portion">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y">
....
....
</div>
</div>
</div>
I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.
However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.
<div class="card" style="height:500px; width:100px;overflow: hidden;">
<div class="card-body d-flex flex-column">
<div class="top-portion mb-auto">
This portion can span from one to many lines.
</div>
<div class="content" style="overflow-y:auto;max-height: 200px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.
So I have this problem, where I have my navigation bar that respondes to screen sizes.
All looks fine, but I need it to be sticky. Whenever I do this, It floats on top of my first hero picture, and with a section of about 40-50px at the top that I can't get rid of.
If someone could please give me a hand with this. It has been doing my head in for 2 weeks now.
Here is the JSfiddle: http://jsfiddle.net/fxar8/
<header>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Teaching and Learning</li>
<li>News and Events</li>
<li>Contact</li>
<li>Home</li>
<li>Home</li>
</ul>
Menu
</nav>
</header>
<div class="hero-image first">
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-6">
<h1>About Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Read More</p>
</div>
</section>
</div>
</section>
<a name="tl"><div class="hero-image second"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-4">
<h1>Teaching & Learning</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<img src="images/tl.jpg" />
</div>
</section>
</div>
</section>
<a name="ne"><div class="hero-image third"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<img src="images/ne.jpg" />
</div>
<div class="grid-4">
<h1>News and Events</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<a name="contact"><div class="hero-image fourth"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<center><img src="images/2501.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2502.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2503.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<footer class="grid-full">
<p>© BHS 2014.</p>
<p class="right"> Designed by Begintoend</p>
</footer>
Cheers in advanced
So basically you have to modify a few things, because 'Teaching an Learning' doesnt fit.
// This is to fit longer text (Teaching and Learning)
// + padding so it looks nicer
nav a {
min-width: 150px;
padding: 0 15px;
}
// Total width needs to be adjusted
// because we increased the size of navbar (Teaching..)
nav ul {
width: 1000px;
}
// The gap was caused by h1 element's top margin inside hero
.big {
margin-top: 0;
}
Also don't forget to adjust viewports - widths at which to transofrm the menu, since the menus' width has increased