Media query not working on mobile breakpoint - html

I am working on a site for a school project where I have 2 media query breakpoints cascading down from desktop to tablet and finally to mobile. My tablet breakpoint at 991px is working fine, but my mobile breakpoint at 479px does not register any changes at all. And I really have no idea what is wrong.
I tried to make more than one breakpoint for my website using media query, expecting it to work right away. The result show that only the media query with the highest max-width value works.
Any help is much appreciated.
This is how I have been writing my media queries:
#media only screen and (max-width: 991px) {}
#media only screen and (max-width: 479px) {}
This is all the code that I have been writing for my media queries if needed
#media only screen and (max-width: 991px) {
body {
width: 96%;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 5.208vw, 100px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
.p2 {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(16px, 1.094vw, 21px);
color: #242325;
margin: 0;
}
.nav-front {
position: sticky;
right: auto;
top: auto;
bottom: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 100%;
border-left: none;
padding: clamp(20px, 2.083vw, 40px);
}
.top-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.nav-links {
display: flex;
flex-direction: row;
background-color: #242325;
border-radius: 50px;
}
.nav-logo {
height: 70px;
width: auto;
margin-bottom: 0;
}
.nav-top {
display: none;
margin-bottom: 40px;
}
a {
font-family: 'Satoshi-Variable';
font-weight: medium;
font-size: clamp(18px, 1.302vw, 25px);
color: #FFF8F2;
margin-bottom: 0;
text-decoration: none;
background-color: #242325;
padding: 20px;
border-radius: 50px;
}
.contact-wrapper {
display: none;
}
header {
width: 100%;
height: 80vh;
}
.profile-img-wrapper {
width: 90%;
}
.about-wrapper {
width: 95%;
}
.scroll-button-wrapper {
display: flex;
justify-content: end;
width: 104%
}
main {
width: 100%;
}
.project-1 {
height: 455px;
}
.project-3 {
height: 455px;
}
.project-5 {
height: 455px;
}
.contact-div {
height: 435px;
}
.arrow-up-left {
margin-bottom: 17%;
}
}
#media (max-width: 479px) {
body {
background-color: aqua;
}
h2 {
font-family: 'salomeitalic';
font-weight: normal;
font-style: normal;
font-size: clamp(50px, 13.021vw, 250px);
padding: 0px;
margin: 0px;
line-height: 1.1;
color: #242325;
}
header {
display: flex;
flex-direction: column;
height: 100%
}
.header-left {
width: 100%;
height: 100vh;
}
}
<html lang="da" dir="ltr">
<head>
<meta charset="UTF-8">
<title>HTML CODE</title>
<link rel="stylesheet" href="projekt-3.css">
</head>
<body>
<nav class="nav-front">
<div class="top-wrapper">
<img class="nav-logo"
src="exports/logo.svg" alt="Staugaard Design Logo">
<div class="nav-links">
<div class="nav-top">
<p>navigation</p>
<img class="arrow-down" src="exports/arrow-down.svg">
</div>
om mig
projekter
kontakt
</div>
</div>
<div class="contact-wrapper">
<div class="margin-buttom">
instagram
</div>
<p>©2022</p>
<button>KONTAKT</button>
</div>
</nav>
<header>
<div class="header-left">
<div class="margin">
<h2>KREATIV DESIGNER & UDVIKLER</h2>
</div>
<div class="moving-text-wrapper">
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
<p class="white">2022 PORTFOLIO</p>
<img class='orange-star' src="exports/star-orange.svg">
</div>
<div class="profile-img-wrapper">
</div>
</div>
<div class="header-right">
<div class="about-wrapper">
<img class="black-star" src="exports/star-2.svg">
<p>hej! mit navn er kristoffer. jeg er en freelance web designer samt web udvikler som bor i odense. Jeg skaber smukke hjemmesider i samarbejde med virksomheder og selvstændige som gerne vil skille sig ud fra konkurrenterne.</p>
</div>
<div class="scroll-button-wrapper">
<div class="scroll-button">
<img class="orange-arrow" src="exports/orange-arrow.svg">
</div>
</div>
</div>
</header>
<div class="transition">
<h1>UDVALGTE<br>PROJEKTER</h1>
</div>
<main>
<div class="main">
<div class="project-1">
<div class="project-text1">
<div class="margin-buttom">
<h2>classic curry</h2>
</div>
<p class="p2">restauranten classic curry er en klassisk indisk restaurant som laver autentiske retter. projekt gik ud på at vi skulle vælge en hjemmeside som vi synes manglede en kærlig hånd.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/classic-img.png" alt="classic curry hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
<div class="project-2">
<div class="project-text2">
<div class="margin-buttom">
<h2>gluds</h2>
</div>
<p class="p2">gluds café manglede en hjemmeside som kunne fremvise alt hvad caféen har at byde på, i et elegant design.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/gluds-img.png" alt="gluds cafe hjemmeside">
</div>
</div>
</div>
<div class="main">
<div class="contact-div">
<img class="arrow-up-white" src="exports/arrow-up-white.svg">
<div class="contact-text">
<h3>kontakt<br>kontakt<br>kontakt</h3>
</div>
</div>
<div class="project-3">
<div class="project-text3">
<div class="margin-buttom">
<h2>justesen artpack</h2>
</div>
<p class="p2">virksomheden justesen artpack er et kunst transport- og vedligeholdelses firma. De havde brug for en mere advanceret hjemmeside og et mere moderne design, som de selv kunne opdatere med blog indlæg.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/justesen-img.png" alt="justesen artpacks hjemmeside">
</div>
<img class="arrow-up-left2" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
<div class="main">
<div class="project-4">
<div class="project-text4">
<div class="margin-buttom">
<h2>m/k aps</h2>
</div>
<p class="p2">m/k service aps er et rengørings firma som manglede et nyere og moderne design, med mere funktionalitet.</p>
</div>
<div class="project-visual">
<img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
<img class="project-img" src="exports/mk-img.png" alt="mk serverice hjemmeside">
</div>
</div>
<div class="project-5">
<div class="project-text5">
<div class="margin-buttom">
<h2>by gitte lage</h2>
</div>
<p class="p2">wellness -by gitte lage er en virksomhed som tilbyder wellness behandlinger og massager. i et tæt samarbejde med ejeren hjalp jeg med at bygge virksomhedens online struktur fra bunden.</p>
</div>
<div class="project-visual">
<div class="img-wrapper">
<img class="project-img" src="exports/wellness-img.png" alt="mk serverice hjemmeside">
</div>
<img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
</div>
</div>
</div>
</main>
</body>


Please try to keep the mobile screen media query above the tablet media query code once

Related

Property display Wont Work on media queries

I have 2 div's #propuesta and .dropdown, I want to appear one and disappear the another one when I change the resolution with display: none and display: block properties, but it wont work. Here is my code
<div class="propuestas">
<div class="square"><img src="img/fa-building.png" title="Infraestructura"></div>
<div class="square"><img src="img/fa-car.png" title="Movilidad"></div>
<div class="square"><img src="img/fa-education.png" title="Educacion"></div>
<div class="square"><img src="img/fa-firstaid.png" title="Salud"></div>
<div class="square"><img src="img/fa-police.png" title="Seguridad"></div>
<div class="square"><img src="img/fa-public.png" title="Espacio Publico"></div>
<div class="square"><img src="img/fa-teamwork.png" title="Trabajo en equipo"></div>
<div class="square"><img src="img/fa-tics.png" title="Técnologia"></div>
<div class="square"><img src="img/fa-water.png" title="Servicios Públos"></div>
<div class="square"><img src="img/fa-woman.png" title="Mujer"></div>
<div class="square"><img src="img/fa-worker.png" title="Empleo"></div>
</div>
<!--MENU PROPUESTAS RESPONSIVE-->
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Categorias</button>
<div id="myDropdown" class="dropdown-content">
Infraestructura y medio ambiente
Empleo
Educación
Trabajo en equipo
Servicios Públicos
Movilidad
Seguridad
Social
Mujer
Tecnologia
</div>
</div>
.propuestas{
width: 100%;
height: 95%;
background-color: rgb(66, 35, 10);
display: flex;
flex-flow: wrap;
justify-content: center;
}
.dropdown {
width: 100%;
height: auto;
position: relative;
display: none;
cursor: pointer;
}
/* media queries*/
#media only screen and (max-width: 2048px) {
.dropdown{
display:none;
}
#propuestas{
display: block;
}
}
#media only screen and (max-width: 748px) {
.dropdown{
display: block ;
}
#propuestas{
display: none;
}
}
you can see the result in following link.
https://jsfiddle.net/ciscojuan/4zqu80av/1/

Your #propuestas css selector in the media query is for an ID.
For class, it should be written as .propuestas.

Can you fix it or tell me what's wrong with this? I want to get Navigacio upper

I got a problem with my code:
So I wrote a simple html and css code Like a simple web page. Then the "Navigacio" is bugging or I dont know it's more in the bottom, but I want it to get this to the top next to "En egy 13 eves srac vagyok..." . So can you help me out?
Here's a picture (the bug is in my secondary display):
https://i.stack.imgur.com/ejlp5.png
The code:
body {
background-color: green;
font-family: Helvetica, Arial, san-serif;
}
a {
text-decoration: none;
color: red;
}
h1,
h2,
h3 {
margin: 0;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header {
background-color: #FF0000;
color: white;
text-align: center;
padding: 10px;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
margin-left: 10px;
margin-bottom: 500px;
}
#nav ul {
list-style-type: none;
padding: 0
}
#main {
width: 600;
float: right;
color: black;
}
#footer {
clear: both;
background-color: #999999;
color: white;
text-align: right
}
#nav .kivalasztott {
font-weight: bold;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stilusv2.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Rolam</h1>
</div>
<div id="content">
<div id="main">
<p> En egy 13 eves srac vagyok, most tanulok programozni HTML-t es CSS-t.
<p>
<p>Jelenleg csak nokedli szaggato szintu vagyok az egeszben, van alapveto batch programozasi tudasom, de nem eleg mindenhez, ismereteimet folyamatosan bovitem...</p>
<p> Az egyik celom egy sajat jatekot, vagy programot fejleszteni gepre/telefonra.</p>
</div>
<div id="nav">
<h3>Navigacio</h3>
<ul>
<li><a class="Kezdolap" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/Css.html">Kezdolap</li>
<li><a class="kivalasztott" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/rolam.html">Rolam</li>
<li>Elerhetoseg</li>
</ul>
</div>
<div id="footer">
Copyright © 2019 Szigeti Donat
</div>
</div>
</div>
</body>
</html>
I think I made a mistake in the CSS file.

Put the #nav div before the #main div like so :
<div id="content">
<div id="nav">
<h3>Navigacio</h3>
<ul>
<li><a class="Kezdolap" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/Css.html">Kezdolap</li>
<li><a class="kivalasztott" href="file:///D:/Don%C3%A1t/Programoz%C3%A1s/html/rolam.html">Rolam</li>
<li>Elerhetoseg</li>
</ul>
</div>
<div id="main">
<p> En egy 13 eves srac vagyok, most tanulok programozni HTML-t es CSS-t.<p>
<p>Jelenleg csak nokedli szaggato szintu vagyok az egeszben, van alapveto batch programozasi tudasom, de nem eleg mindenhez, ismereteimet folyamatosan bovitem...</p>
<p> Az egyik celom egy sajat jatekot, vagy programot fejleszteni gepre/telefonra.</p>
</div>
<div id="footer">

Problems making elements fit for mobile first/media query

I never finished my web-integrator education but i am now a mediagraphics intern and i offered to code a bit in css and html. So i am very rusty and this project has been just as much a refresher of knowledge as it has been a proper project. So be nice please.
I am making the site responsive however I am having a problem coding for the phone screen size.
To the right of my content the background image continues, allowing you to scroll sideways. I simply can't find out what's causing this. Images and everything are edited to fit the width there.
I have one suspicion, that I might have messed up completely with the width of the pixels. I have made it fit the screen but should i forget that and use the actual widths of the phone screen? Just seems so small and it appears to work fine with 1090px width here, it is just the background that push to the side.
This is my css code for the media query I am using for the phone.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Splitters */
.splitter1 {
visibility: hidden;
height:0;
width:0;
z-index:1000;
}
.splitter1mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter2 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter2mobile {
visibility:visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter3 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter3mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0 0 7px 0;
padding:0;
z-index: 1000;
}
.splitter4 {
visibility: hidden;
width: 0;
height: 0;
}
.splitter4mobile {
visibility: visible;
height:250px;
width:1090px;
margin:-2px 0 0 0;
padding:0;
z-index: 1000;
}
.orangesplitter {
height:100%;
width:100%;
margin-top:-17px;
margin-bottom:-11px;
}
.greysplitter {
height:239px;
width:100%;
margin:-19px 0 26px 0;
}
footer {
width:86.5%;
}
.Element-header {
transform: translate3d(0,0,0);
}
.Element-header--fixed {
top: 0;
position: fixed;
}
/*------------- Body --------------*/
.fysphone {
margin-left:57px;
margin-top:112px;
visibility: visible;
width:56%;
height:45%;
}
.fysphone img {
visibility: visible;
width:100%;
height:500px;
}
.fysimgbox {
display:none;
}
.jonimgbox {
visibility: hidden;
width:0;
height:0;
}
.contentwrapper {
width:100%;
display:inline-block;
}
.textbox {
width:90%;
}
.jonimgboxphone {
margin-top:22px;
}
.jonnicephone {
margin:0 0 0 100px;
}
.jontitelphone {
margin-left:199px;
}
header {
transform: translate3d(0,0,0);
z-index: 1000;
padding:0;
margin:0;
width:1090px;
height:265px;
position:fixed;
box-shadow:0 5px 15px 0 #7d7b7c;
}
body{
padding:0;
margin:0 auto;
width:1090px;
height:8227px;
background-image: url(img/wallbgfadedphone.png);
background-repeat:repeat;
background-blend-mode: overlay;
}
.imgmbox {
margin-left:0;
margin-right:10px;
}
/*----- Google Maps -----*/
iframe {
margin-top:150px;
margin-right:20px;
width:500px;
height:350px;
}
.wrapper {
margin: 0 auto;
width:100%;
height: 8227px;
}
/*------------- Header ------------*/
/*------------- Header Navbar ------------*/
.Hnavbar {
margin-top:0;
height:101px;
width:100%;
box-shadow: inset 0 0 0 1000px rgba(125,123,124,.9);
background-image:url(img/wallbg.jpg);
}
.nav1 {
margin-left:-26px;
}
nav ul {
height:101px;
float:left;
margin:0;
width:100%;
}
nav ul li {
margin-left:30px;
margin-top:18px;
float:left;
height:30px;
list-style: none;
border-radius: 9px;
}
nav ul li a {
font-family:Exo;
color: #dedede;
padding:5px 23px 5px 23px;
border-top:1px solid #dedede;
border-bottom:1px solid #dedede;
text-decoration: none;
text-align: center;
font-size: 40px;
}
.fblink {
width:50px;
height:50px;
float:left;
margin-left:150px;
margin-top:15px;
display:none;
}
.fbicon:hover {
opacity:1.0;
}
/*** Content Block ***/
.contentblock {
width:100%;
height:1200px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
.contentblock1 {
width:100%;
height:1239px;
background-color:rgb(255,255,255,0.8);
display:flex;
opacity:0.9;
}
.contentblock2 {
display:inline-block;
width: 100%;
height:1971px;
background-color:rgb(255,255,255,0.8);
opacity:0.9;
margin-top:10px;
}
#contentblock3 {
width: 100%;
height:1120px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
/*** Anchor Menupoint Scrollpositioner ***/
.anchor {
display:none;
height:265px;
margin-top: -265px;
visibility:hidden;
}
/*** Om Text ***/
.textbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
/*** Fys Text ***/
.fysbox {
font-family:Exo-Regular;
width:100%;
height:850px;
color:#7d7b7c;
padding:0;
}
.fysbox h2 {
font-size:40px;
margin-left:35px;
}
.fysbox p {
font-family:Exo-Regular;
width:90%;
margin:0 0 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
.fysbox ul li {
font-size:33px;
font-weight:600;
}
.textwrapper {
width:100%;
padding:20px;
}
/** Træning Text **/
.traeningbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight:600;
color:#7d7b7c;
padding:0;
}
.traeningbox h2 {
font-size: 40px;
margin-left:35px;
}
.traeningbox {
width:90%;
}
/*---- Priser Text ----*/
.textboxpris {
float:left;
font-family:Exo-Regular;
width:350px;
margin:0 0 0 35px;
font-size:24px;
font-weight:600;
color:#7d7b7c;
padding:20px;
}
.textboxpris p {
font-size:33px;
}
.prish {
width:188px;
}
.pristext {
width:757px;
}
.textboxpris h2 {
font-size:40px;
}
.pristext {
font-size: 26px;
font-weight: 600;
margin-top:100px;
}
.prispunkt {
font-size:26px;
}
.textwrapperpris {
width:872px;
}
.textwrapperpris h2 {
}
.prisv {
float:left;
width:570px;
height:200px;
}
.prisimgbox {
visibility: hidden;
width:0;
height:0;
}
/*--- Kontakt text ---*/
.kontaktbox {
margin:0 0 0 98px;
float:left;
width:852px;
height:600px;
padding:0px;
font-family: Exo-Regular;
font-size:33px;
font-weight:600;
}
.kontaktbox h2 {
font-size: 40px;
}
iframe {
display:none;
}
.traeningimgbox {
visibility: hidden;
width:0;
height:0;
}
footer {
width:905px;
}
}
And this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slagelse Sportsklinik</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a name="top"></a>
<div class="wrapper">
<header>
<div class="Hlogobox">
<img src="img/logowhite.png" alt="">
</div>
<nav class="Hnavbar">
<ul>
<li class="nav1"><span>Home</span></li>
<li><span>Fysioterapi</span></li>
<li><span>Træning</span></li>
<li><span>Priser</span></li>
<li class="nav5"><span>Kontakt</span></li>
<a class="fblink" target="_blank" href="https://www.facebook.com/slagelsesportsklinik"><img class="fbicon" src="img/icons/facebook.png" alt=""></a>
</ul>
</nav>
</header>
<main>
<div class="contentblock1">
<div class="contentwrapper">
<div class="jonimgboxphone">
<img class="jontitelphone" src="img/jontitel.png" alt="">
<br>
<img class="jonnicephone" src="img/jonnice.png" alt="">
</div>
<div class="textbox">
<p>
<b>Slagelse Sportsklinik</b> startede i 2017 af fysioterapeut Jon Ahrensbøll med ønsket om at ville starte en klinik, der leverede hurtige og markante resultater, der skulle sikre hurtig tilbagevenden til idræt eller arbejde.
<br>
<br>
<span class="jonahrensboll"><b>Jon Ahrensbøll</b></span> har igennem 18 år arbejdet som fysioterapeut på forskellige klinikker med alle typer af patienter. De senere år har patientgruppen primært været idrætsfolk primært indenfor triatlon, løb og cykling. Jon Ahrensbøll er samtidigt tilknyttet Gørlev Fysioterapi og Idrætsklinik som fysioterapeut med fysioterapeutisk ansvar for både Vestsjællands Idrætsefterskole og Gørlev Idrætsefterskole.
</p>
</div>
<div class="jonimgbox">
<img class="jontitel" src="img/jontitel.png" alt="">
<img class="jonnice" src="img/jonnice.png" alt="">
</div>
</div>
</div>
<div class="orangesplitter">
<img class="splitter1" src="img/orangesplitter1.png" alt="">
<img class="splitter1mobile" src="img/orangesplitter1mobile.png" alt="">
</div>
<a name="fysmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock2">
<div class="totalwrap">
<div class="fysphone">
<img class="img" src="img/jonbrugerlaser.png" alt="">
</div>
<div class="fysbox">
<div class="textwrapper">
<h2>Fysioterapi</h2>
<p>
Hos Slagelse Sportsklinik udfører vi fysioterapeutiske behandlinger af høj kvalitet. Vi har en høj grad af information om både tests og behandling, og vi tillægger altid et holistisk perspektiv i vores behandlinger.
<br>
<br>
For at opnå størst mulig positiv effekt benytter vi forskellige fysioterapeutiske, osteopatiske og kiropraktiske manuelle teknikker, ligesom vi ofte inddrager forskellige former for træningsøvelser.
<br>
<br>
Udover manuelle teknikker og træningsøvelser benytter vi desuden bl.a.
</p>
<ul>
<li>IMS (Intra Muskulær Stimulation) dvs. behandling med nåle, hvorved bl.a. muskulatur afspændes hurtigt.</li>
<li>Kinesiotape, dvs. optapening med hyperelastisk tape, der på en gang støtter og bibeholder fuld funktion af både muskler og led.</li>
<li>High Power Laser, dvs. laserbehandling, der skaber en kemisk modulering af vævet, så opheling sker markant hurtigere</li>
</ul>
</div>
</div>
<div class="fysimgbox">
<img class="imgfys" src="img/jonbrugerlaser.png" alt="">
</div>
</div>
</div>
<div class="greysplitter"><img class="splitter2" src="img/greysplitter1.png" alt="">
<img class="splitter2mobile" src="img/greysplitter1mobile.png" alt="">
</div>
<a name="træningmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock3" id="contentblock3">
<div class="traeningbox">
<div class="textwrapper">
<h2>Træning</h2>
<p>
Hos Slagelse Sportsklinik tilbydes træning på små hold (max. 5 personer). Vi har forskellige former for holdtræning, og ens for dem alle er, at der er fokus på CORE, stabilitet og -ikke mindst- funktionalitet. Træningen er målrettet den enkelte deltager, således at alle uanset niveau vil blive udfordret.
<br>
<br>
Vi har valgt små hold ud fra ideen om, at på små hold er det intensiv, nærmest personlig træning samtidigt med, at man fortsat kan være social.
<br>
<br>
På alle hold benyttes styrke- og udspændingsøvelser hentet fra Pilates, Yoga og CORE, ligesom der benyttes træning i TRX, dvs. træning i slynger med egen kropsvægt som modstand.
</p>
</div>
</div>
<div class="traeningimgbox">
<img src="img/grittoneddown.png" alt="">
<img class="pushimg" src="img/stretch.png" alt="">
</div>
</div>
<div class="orangesplitter">
<img class="splitter3" src="img/orangesplitter2.png" alt="">
<img class="splitter3mobile" src="img/orangesplitter2mobile.png" alt="">
</div>
<a name="prismenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock">
<div class="textboxpris">
<div class="textwrapperpris">
<h2>Priser</h2>
<p class="prisv">
Fysioterapeutisk behandling pr. gang <br><br>
Træning pr. gang <br><br>
Træningsklippekort - 10 gange <br><br>
Behandlingsklippekort - 10 gange <br><br>
</p>
<p class="prispunkt">
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
</p>
<p class="prish">
<b>kr. 275,00</b> <br><br>
<b>kr. 45,00 </b><br><br>
<b>kr. 400,00</b> <br><br>
<b>kr. 2500,00</b> <br><br>
</p>
<p class="pristext">
Slagelse Sportsklinik har <b>ikke</b> overenskomst med Den Offentlige Sygesikring, så tilskud hertil kan ikke opnås. Dette betyder samtidigt, at der ikke kræves henvisning fra egen læge for at kunne få behandling hos Slagelse Sportsklinik.
</p>
</div>
</div>
<div class="prisimgbox"><img src="img/transaction.png" alt="">
</div>
</div>
<div class="greysplitter">
<img class="splitter4" src="img/greysplitter2.png" alt="">
<img class="splitter4mobile" src="img/greysplitter2mobile.png" alt="">
</div>
<a name="kontaktmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock" id="contentblock5">
<div class="kontaktbox">
<h2>Kontakt</h2>
<p>
Du kan kontakte klinikken på følgende måder:
</p>
<ul>
<li><p><b>Telefon</b></p></li>
<li><p><b>Mail</b></p></li>
<li><p><b>Snailmail</b></p></li><br><br>
<li><p><b>Facebook</b></p></li>
</ul>
<ul>
<li><p>2844 0023</p></li>
<li><p>slagelsesportsklinik#gmail.com</p></li>
<li><p>Slagelse Sportsklinik <br>
Nytorv 4, 1. sal <br>
4200 Slagelse</p></li>
<li><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></li>
</ul>
</div>
<iframe
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDXNF-E5Se1Suc6FWGmQWoH_bcpHoSwEEs
&q=Nytorv4+Slagelse,Slagelse+DK" allowfullscreen>
</iframe>
</div>
</main>
<footer>
<div class="footerleft">
<adress>Slagelse Sportsklinik</adress><br>
<adress>Nytorv 4, 1. Sal</adress><br>
<adress>4200 Slagelse</adress><br>
</div>
<div class="footerright">
<img class="footericon" src="img/icons/tlf.png" alt=""><adress>2844 0023</adress><br><br>
<img class="footericon" src="img/icons/mail.png" alt=""><adress>slagelsesportsklinik#gmail.com</adress><br><br>
<img class="footericon" src="img/icons/fbsort.png" alt=""><adress><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></adress>
</div>
</footer>
</div>
</body>
</html>

Add to your container div, in this case wrapper, the following:
.wrapper {
overflow:hidden;
width:100%;
max-width:1200px; // or whatever you want
display:block;
margin: 0 auto;
}
This will contain everything inside your wrapper element and center it on the page for screen sizes greater than 1200px.
Also your header and body elements currently have fixed widths, you should remove the property from body, and give header a percentage-based width:
header {
width:100%;
}

Wanting all Images to have the same height in a container

I'm trying to have all images in my flex container have the same height using a 4:3 ratio, all of this being responsive.
When out of the flex container everything works well, but when put in it, it seems like it's the length of the title that dictates the width. I can't figure out why.
https://jsfiddle.net/ts8Lwp6g/
/* Just copying the guy in vid for now, trying to figure it all out hopefully it won't be too much of a bother responsive eh ffs , somethings I haven't copied, tryna do best */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-color: gray;
width: 80%;
margin: auto;
}
#cccccc {
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.w {
background-color: red;
/* doesnt show hay */
display: block;
}
.views {
float: left
}
.rating {
float: right
}
.parentt {
max-width: 258px;
}
.containertt {
width: 100%;
position: relative;
padding-bottom: 75%;
/* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.containertt img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.figcaptionnnn {
/* background-color:red; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.figcaptionnnn a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tete.css">
</head>
<body>
<div id="cccccc">
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span><br/>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batan" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</body>
</html>

How to do an aside with 100% height?

I have this code, and I would like to have the aside with 100% height. I have already set the height of the aside, body and section to 100%, but it does not work. Do you know how to do it? Is there any other way to do it? Thanks
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body {
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page {
width: 100%;
margin: auto;
}
/* Header */
header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#titre {
display: flex;
flex-direction: row;
align-items: flex-end;
}
#titre div {
position: absolute;
right: 40px;
top: 25px;
}
/* Body */
aside {
width: 5%;
background: url(ban.jpg);
border-radius: 4px;
}
section {
display: flex;
}
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>
</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>

use this below css code with "max-height:100%;"
<style type="text/css">
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body
{
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page
{
width: 100%;
margin: auto;
}
/* Header */
header
{
display: flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
#titre
{
display:flex;
flex-direction:row;
align-items:flex-end;
}
#titre div
{
position:absolute;
right: 40px;
top: 25px;
}
/* Body */
aside
{
width: 5%;
max-height:100%;
background: url(ban.jpg);
border-radius: 4px;
word-wrap:break-word;
border:1px solid red;
}
section
{
display:flex;
}
</style>
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>this is testing</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>

Set the position of your aside tag to absolute, then change the height and the width to whatever you want or need. (note i made the background red to make it clear that the height changed)
jsfiddle,net/thpgq299