I'm currently trying to program a responsive website, and I'm using media queries to differentiate between different screen sizes.
However, when the screen is at the biggest size, I want the content of the website to fit the center 75% of the screen, thus increasing and decreasing the sidebars on the left and right, before it jumps to another layout.
My code is in a JSFiddle: https://jsfiddle.net/zkbo7rdu/
<body>
<div id="container">
<div class="navbar">
<h1>21Webb</h1>
<em><p class="quote">"The teamwork makes the dreamwork."</p></em>
</div>
<div class="aboutUs part left">
<h2>Over ons</h2>
<p>Hallo, wij zijn Berend en Brent, beide 14 jaar oud en nu al beginnende ondernemers. Wij zijn op het idee gekomen toen we een gesprek hadden over programmeren en dat zijn we verder gaan uitwerken. Op het moment zitten wij nog steeds in de uitwerkingsfase waarin alles geregeld moet worden. De Algemene Voorwaarden, contracten, enzovoort. Als deze fase eenmaal voorbij is, gaan wij websites bouwen voor particulieren en bedrijven. Dit gaan wij doen omdat het een leuke ervaring is, omdat wij er wat van leren en om er wat geld aan over te houden. En een eigen bedrijf is natuurlijk het beste (bij)baantje wat je je maar kan indenken!</p>
</div>
<div class="whatDoWeDo part right">
<h2>Wat doen wij</h2>
<p>wij bouwen, hosten en onderhouden websites (d.w.z. ontwerpen, programmeren, bijwerken, online zetten en online houden) voor particulieren en mogelijk bedrijven. Wij gaan ons best doen om voor elke klant een website te bouwen waar hij of zij tevreden mee is. Om dit idee optimaal te benutten, maken wij gebruik van meerdere programma's en om elke klant tevreden te stellen. <!-- Moet langer voor een mooie outline met Over ons --> </p>
</div>
<div class="howWorking part total">
<h2>Hoe gaan wij te werk</h2>
<p>Wij werken met een aantal simpele stappen. (Klik voor meer informatie)</p>
<ol class="steps">
<li><span class="step" title="Klik voor meer informatie">Het verkrijgen van uw wensen. </span><span class="stepText">In deze stap komen we tot een overeenstemming hoe de website eruit zal komen te zien. Dit zal te paard gaan met een of meerdere tekeningen, om een zo goed mogelijk beeld te krijgen van wat u wilt met uw website.</span>
</li>
<li><span class="step" title="Klik voor meer informatie">De offerte. </span><span class="stepText">Hier krijgt u de offerte toegestuurd met alle bijkomende informatie.</span>
</li>
<li><span class="step" title="Klik voor meer informatie">Materiaal verkrijgen. </span><span class="stepText">Nu is het uw beurt om de website mogelijk te maken. Wij vragen u hier om de teksten en foto's naar ons te sturen, zodat wij alles hebben om de website compleet te maken.</span>
</li>
<li><span class="step" title="Klik voor meer informatie">Ontwerpen. </span><span class="stepText">Aan de hand van de eerste tekeningen gaan we een aantal ontwerpen maken waaruit u kunt kiezen. Natuurlijk kunt u ook uw voorkeuren nog wijzigen, dan passen wij dat voor u aan. En zodra het definitieve ontwerp is goedgekeurd, gaan we door met de volgende stap.</span>
</li>
<li><span class="step" title="Klik voor meer informatie">Bouwen en testen. </span><span class="stepText">In deze voorlaatste fase wordt uw website gebouwd en getest op meerdere apparaten. Op een PC met een 21" monitor, smartphones met 5.1", tablets met 10.1" en laptops met 13.3" beeldschermen.</span>
</li>
<li><span class="step" title="Klik voor meer informatie">Oplevering. </span><span class="stepText">Bij deze laatste stap wordt uw website opgeleverd en online gezet. Er wordt een backup gemaakt van uw oude website en van de nieuwe website voor het geval dat.</span>
</li>
</ol>
</div>
<div class="contact part">
<!-- Code -->
</div>
<div class="socialMedia part">
<!-- Code -->
</div>
<div class="updates part">
<!-- Code -->
</div>
</div>
/* NavigationBar */
html {
background-color: #FFF;
font-family: "Century Gothic";
color: #333;
width: 80%;
margin: 0 auto;
}
.navbar {
text-align: center;
border-bottom: 3px solid #333;
}
.navbar p {
margin-top: -20px;
}
/* General */
.left {
width: 49%;
float: left;
display: inline-block;
}
.right {
width: 49%;
float: right;
display: inline-block;
}
.total {
width: 100%;
display: inline-block;
}
/* About us */
.aboutUs {
height: 230px;
}
/* What do we do */
.whatDoWeDo {
height: 230px;
}
/* How do we work */
/* Steps */
.step /* Clickable */ {
visibility: visible;
}
.stepText/* Standard: hidden */ {
visibility: hidden;
}
.stepTextV/* When clicked: toggle this class */ {
visibility: visible;
}
Thanks in advance,
Brent
@Brent
You need to set a max-width property for you central column and use margin: 0 auto to centre align your content.
Check out this edit on your fiddle.
Not sure what you are trying to accomplish with that JavaScript though - you should be using CSS media queries to create and manage breakpoints (I'd suggest using a mobile-first approach) :)