I added media queries to my css files in order to make my website responsive. However, I noticed that there is an issue with the content being cut off at the bottom of the screen on smaller devices (netbooks and smartphones). How do you tailor the height to adjust to the viewer's screen size?
Right Results (longer screens):
Wrong Results (shorter screens):
Note that on this page, the intro section and text cuts off as the screen gets shorter. I'm not sure if it has something to do with me using percentage instead of pixels. What's the best way to combat this?
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
overflow: auto;
background-color: cornflowerblue;
}
.main {
background-repeat: no-repeat;
background-size: cover;
width: 75%;
height: 100%;
float: right;
transition: .3s;
padding: 0;
margin: 0;
}
.nav-bar {
background-color: #4a235a;
width: 25%;
height: 100%;
opacity: 0.9;
transition: .3s;
box-shadow: 2px 0px 4px black;
position: fixed;
}
.bio-feature {
width: 100%;
height: 35%;
background-color: cornflowerblue;
padding: 0;
margin: 0;
}
.intro {
color: white;
font-style: italic;
font-family: "Quicksand" ;
font-size: 1.3em;
margin-left: 6%;
margin-right: 6%;
}
#first-line-intro {
padding-top: 1%;
}
.heading {
/* margin-top: 20px; */
}
h1 {
color: white;
font-family: "Quicksand" ;
padding: 0;
/* margin-top: -12px; */
margin-bottom: 16px;
font-size: 2em;
}
h2 {
color: cornflowerblue;
margin: 15%;
text-decoration: underline;
font-size: 1.5em;
font-family: Quicksand;
}
h3 {
font-family: Pacifico;
padding: 3%;
font-size: 1.2em;
color: lemonchiffon;
font-weight: bold;
}
h6 {
font-family: Ubuntu;
color: navy;
font-weight: 600;
}
p {
padding: 0;
/*margin-bottom: -200px;*/
font-size: 1.2em;
}
.highlighted-text {
color: lime;
}
.highlighted-text2 {
color: darkred;
}
a {
color: white;
}
a:hover {
text-decoration: none;
}
.frontend{
height: 100vh;
background-color: white;
border-right: solid 2px white;
}
.frontend-text, .backend-text {
font-family: Quicksand;
font-size: 1.1em;
text-align: center;
margin: 6% 8%;
}
.frontend-img {
margin-bottom: 6%;
}
#additional-skills {
position: relative;
top: 6%;
}
.backend{
height: 100vh;
background-color: #E6E6E6;
text-align: center;
}
svg {
width: 15%;
display: inline-block;
margin: 0 1%;
}
.php {
width: 23%;
margin-bottom: 5%;
}
.mysql {
width: 23%;
margin-bottom: 7%;
}
.python {
width: 18%;
margin-bottom: 8%;
}
.html-css {
text-align: center;
}
.jquery-bootstrap {
text-align: center;
}
.col-sm-12 {
}
.nav-panel {
padding: 10% 30%;
margin-top: 10%;
}
.nav-panel li {
color: white;
text-transform: uppercase;
list-style-type: none;
padding: 20%;
border-bottom: solid 1px gray;
font-size: 1.2em;
}
.nav-panel li:hover {
color: gray;
}
.space {
position: relative;
left: 20px;
}
.active {
color: cyan;
font-weight: bold;
}
.active:hover {
color: cyan;
font-weight: bold;
}
.selected {
color: cyan;
font-weight: bold;
}
.selected:hover {
color: cyan;
font-weight: bold;
}
.nav-link {
font-family: Muli;
position: relative;
right: 15px;
}
/*
.nav-link:hover {
color: gray;
text-decoration: none;
} */
.menu-icon {
width: 30px;
margin: 1.2%;
padding: 0.05% 0.02%;
}
.menu-icon:hover {
background-color: rgba(86, 101, 115, 0.3);
border: none;
border-radius: 50%;
}
.hide-nav {
transform: translateX(-100%);
}
.expand-main {
width: 100%;
}
.shift-h1 {
margin-top: -1%;
}
.mobile-dropdown {
display: none;
}
.mobile-menu-icon {
display: none;
}
.copyright {
display: none;
color: dimgray;
}
/* MOBILE */
/* MEDIA QUERIES */
#media (min-width: 1000px) and (max-width: 1150px) {
.intro {
font-size: 1.2em;
}
.nav-link {
font-size: 0.8em;
}
h1 {
font-size: 1.9em;
}
}
#media (min-width: 800px) and (max-width: 1000px) {
.intro {
font-size: 1.1em;
}
.nav-link {
font-size: 0.9em;
}
h1 {
font-size: 1.8em;
}
}
#media (max-width: 800px) {
.intro {
font-size: 1em;
margin-left: 3%;
margin-right: 3%;
}
h1 {
font-size: 1.8em;
}
h3 {
font-size: 0.8em;
}
.nav-link {
font-size: 0.9em;
}
}
#media (max-width: 750px) {
.nav-bar {
}
.main {
}
.nav-link {
font-size: 0.8em;
}
}
#media (max-width: 700px) {
.bio-feature {
height: 40%;
}
}
#media (max-width: 600px) {
h1 {
font-size: 1.9em;
}
.heading {
position: relative;
top: 40px;
}
.main {
width: 100%;
}
.nav-bar {
display: none;
}
.menu-icon {
display: none;
}
.bio-feature {
/* height: 30%; */
margin: 0;
padding: 0;
}
.backend {
background-color: #E6E6E6;
}
body, html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: auto;
}
.mobile-background {
background-color: #4a235a;
}
.nav-bar {
display: none;
}
.main {
width: 100%;
}
.menu-icon {
display: none;
}
.mobile-menu-icon {
margin: 3% 5%;
width: 24px;
padding: 0;
float: right;
position: absolute;
top: 0;
right: 0;
}
.mobile-dropdown {
width: 100%;
margin: 0;
padding: 0;
}
.mobile-li {
width: 100%;
margin: 0px;
color: white;
background-color: #4a235a;
text-transform: uppercase;
list-style-type: none;
padding: 2%;
border-bottom: solid 2px gray;
font-size: 1em;
float: left;
}
.mobile-a {
font-family: Muli;
}
.mobile-a:hover {
text-decoration: none;
color: gray;
}
.active {
color: cyan;
}
.active:hover {
color: cyan;
}
.button:hover {
text-decoration: none;
}
.selected {
color: cyan;
font-weight: bold;
}
.selected:hover {
color: cyan;
font-weight: bold;
}
.contact {
border-bottom: none;
}
.expand {
height: 100%;
}
.mobile-menu-icon {
display: block;
}
.mobile-menu-icon:hover {
background-color: rgba(86, 101, 115, 0.1);
border: none;
border-radius: 50%;
}
.purple-background {
background-color: #4a235a;
}
}
#media (min-width: 0px) and (max-width: 600px) {
a {
color: gainsboro;
}
.bio-feature {
height: 42%;
}
}
#media (min-width: 500px) and (max-width: 600px) {
.heading {
position: relative;
top: 60px;
}
.intro {
font-size: 1.1em;
}
}
#media (max-width: 550px) {
.frontend, .backend {
height: 100%;
}
.frontend-text, .backend-text {
margin-bottom: 20px;
}
.copyright {
display: block;
font-size: 0.9em;
margin-top: 20px;
}
}
#media (max-width: 500px) {
.heading {
position: relative;
bottom: 30px;
}
}
#media (min-width: 400px) and (max-width: 500px) {
.intro {
margin: 0 8%;
}
}
#media (max-width: 400px) {
h1 {
font-size: 1.7em;
}
.bio-feature {
height: 43%;
}
}
#media (max-width: 310px) {
.intro {
font-size: 0.95em;
}
}
/* Add dropdown menu at 600px and down for this page */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gab's Tech Space</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel="stylesheet" href="gabsTechSpace_about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>
<body>
<div class="mobile-dropdown collapse-nav">
<ul>
<li class="mobile-li"><a class="mobile-a" href="gabsTechSpace_home.html">Home</a></li>
<li class="mobile-li"><a class="selected mobile-a" href="gabsTechSpace_about.html">About</a></li>
<li class="mobile-li"><a class="mobile-a" href="gabsTechSpace_projects.html">Projects</a></li>
<li class="mobile-li contact"><a class="mobile-a" href="gabsTechSpace_contact.html">Contact</a></li>
</ul>
</div>
<div class="main">
<div class="bio-feature">
<div class="heading">
<h1 class="text-center">Gabrielle Rutherford</h1>
<p class="intro text-center"><span id="first-line-intro">I'm a frontend developer working in the Houston Metro Area. </span><br> I often spend my free time delving deeper into the fascinating, yet incessant world of coding and design. And into pretty much anything else that stimulates my creative flair... I've realized that my destiny is to <strong>create things</strong> that will have an astounding impact on other people's lives.</p>
</div>
</div>
<div class="skills">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 frontend">
<h2 class="text-center">Frontend Skills</h2>
<div class="frontend-img">
<div class="row">
<div class="col-sm-12 html-css">
<svg class="html5" viewBox="0 0 128 128">
<path fill="#E44D26" d="M19.037 113.876l-10.005-112.215h109.936l-10.016 112.198-45.019 12.48z"></path><path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878h-44.937z"></path><path fill="#EBEBEB" d="M64 52.455h-18.212l-1.258-14.094h19.47v-13.762h-34.511l.33 3.692 3.382 37.927h30.799zM64 88.198l-.061.017-15.327-4.14-.979-10.975h-13.817l1.928 21.609 28.193 7.826.063-.017z"></path><path fill="#fff" d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zM63.952 24.599v13.762h33.244l.276-3.092.628-6.978.329-3.692z"></path>
</svg>
<svg class="css3" viewBox="0 0 128 128">
<path fill="#1572B6" d="M18.814 114.123l-10.054-112.771h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"></path><path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"></path><path fill="#fff" d="M64.001 51.429h18.302l1.264-14.163h-19.566v-13.831h34.681999999999995l-.332 3.711-3.4 38.114h-30.95v-13.831z"></path><path fill="#EBEBEB" d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031h-13.882l1.937 21.717 28.331 7.863.063-.018v-14.39z"></path><path fill="#fff" d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881h-13.876z"></path><path fill="#EBEBEB" d="M64.048 23.435v13.831000000000001h-33.407999999999994l-.277-3.108-.63-7.012-.331-3.711h34.646zM64.001 51.431v13.831000000000001h-15.209l-.277-3.108-.631-7.012-.33-3.711h16.447z"></path>
</svg>
</div>
</div>
<div class="row">
<div class="col-sm-12 jquery-bootstrap">
<svg class="jquery" viewBox="0 0 128 128">
<path fill="#0868AC" d="M9.625 32.181c-11.029 15.851-9.656 36.476-1.231 53.32.2.404.41.801.617 1.198l.394.759.246.437.439.786c.262.461.53.92.804 1.379l.459.756c.304.491.615.976.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05.228.308c.401.553.814 1.099 1.232 1.639l.464.59c.373.469.752.935 1.138 1.399l.435.52c.518.61 1.047 1.217 1.586 1.812l.033.033.061.068c.527.575 1.066 1.137 1.612 1.699l.517.521c.423.426.853.845 1.287 1.262l.527.5c.58.547 1.166 1.083 1.764 1.607l.028.022.307.262c.527.456 1.063.909 1.603 1.353l.664.529c.441.354.887.702 1.336 1.044l.714.543c.496.365.995.724 1.499 1.075l.546.387.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355c.565.326 1.134.646 1.71.959.312.168.632.327.946.488.407.213.811.429 1.225.636l.283.137.501.242c.641.306 1.287.607 1.94.897l.41.184c.748.327 1.502.641 2.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693 53.339 9.727 68.833-32.053 68.833-32.053-13.013 16.953-36.111 21.425-57.996 16.446-.829-.187-1.633-.446-2.442-.685l-.609-.185c-.79-.242-1.573-.497-2.352-.765l-.323-.117c-.698-.245-1.387-.504-2.074-.769l-.582-.229c-.752-.297-1.5-.607-2.239-.931l-.447-.198c-.635-.288-1.263-.578-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743-.324-.171-.654-.332-.975-.51-.592-.317-1.172-.646-1.751-.982l-.591-.33c-.769-.452-1.528-.921-2.28-1.397l-.615-.41c-.545-.351-1.088-.709-1.623-1.079l-.522-.367c-.516-.365-1.027-.734-1.534-1.109l-.679-.514c-.465-.355-.927-.713-1.384-1.082l-.617-.495c-.582-.479-1.156-.959-1.724-1.453l-.189-.159c-.614-.539-1.216-1.092-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509c-.543-.556-1.076-1.119-1.598-1.69l-.079-.084c-.552-.604-1.092-1.221-1.621-1.844l-.424-.504c-.394-.475-.785-.956-1.167-1.442l-.427-.532c-.459-.596-.908-1.189-1.347-1.794-12.15-16.574-16.516-39.432-6.805-58.204M43.862 18.825c-7.977 11.478-7.543 26.844-1.321 38.983 1.043 2.035 2.216 4.01 3.528 5.889 1.195 1.713 2.52 3.751 4.106 5.127.575.633 1.176 1.251 1.79 1.858l.472.465c.596.578 1.201 1.146 1.828 1.698l.074.064.018.018c.693.608 1.408 1.191 2.135 1.767l.485.378c.729.559 1.472 1.107 2.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319c.544.349 1.095.689 1.655 1.015l.235.136c.483.278.972.552 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672 41.183 6.823 50.691-24.886 50.691-24.886-8.57 12.343-25.168 18.233-42.879 13.635-.787-.207-1.562-.431-2.333-.674l-.701-.227c-.548-.177-1.092-.365-1.631-.562l-.736-.274c-.592-.228-1.176-.462-1.756-.708l-.473-.2c-.727-.316-1.443-.65-2.148-.999-.363-.177-.72-.364-1.078-.548l-.622-.32c-.458-.248-.914-.506-1.363-.77l-.326-.185c-.558-.325-1.107-.661-1.651-1.008l-.498-.332c-.359-.232-.717-.469-1.069-.707-.759-.524-1.498-1.072-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971-3.062-9.836-2.402-20.878 2.903-29.84M72.657 8.847c-4.702 6.92-5.164 15.514-1.901 23.156 3.441 8.113 10.491 14.476 18.72 17.495.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424 22.74 4.394 28.908-11.669 30.549-14.034-5.402 7.779-14.482 9.646-25.623 6.942-.88-.213-1.847-.531-2.695-.832-1.088-.388-2.16-.83-3.201-1.329-1.978-.951-3.864-2.104-5.612-3.424-9.969-7.565-16.162-21.994-9.657-33.745"></path>
</svg>
<svg class="bootstrap" viewBox="0 0 128 128">
<path fill="#5B4282" d="M75.701 65.603c-2.334-.768-5.694-.603-10.08-.603h-17.621v23h18.844c2.944 0 5.012-.315 6.203-.535 2.099-.376 3.854-1.104 5.264-1.982 1.409-.876 2.568-2.205 3.478-3.881.908-1.676 1.363-3.637 1.363-5.83 0-2.568-.658-4.54-1.975-6.436-1.316-1.896-3.141-2.965-5.476-3.733zM73.282 55.087c2.317-.688 4.064-1.89 5.239-3.487 1.176-1.598 1.763-3.631 1.763-6.044 0-2.286-.549-4.314-1.646-6.054s-2.662-2.413-4.699-3.056c-2.037-.641-5.53-.446-10.48-.446h-15.459v20h16.587c4.042 0 6.939-.38 8.695-.913zM126 18.625c0-9.182-7.443-16.625-16.625-16.625h-91.75c-9.182 0-16.625 7.443-16.625 16.625v91.75c0 9.182 7.443 16.625 16.625 16.625h91.75c9.182 0 16.625-7.443 16.625-16.625v-91.75zm-35.447 66.12c-1.362 2.773-3.047 4.911-5.052 6.415-2.006 1.504-4.521 2.78-7.544 3.548-3.022.769-6.728 1.292-11.113 1.292h-27.844v-69h27.42c5.264 0 9.485.609 12.665 2.002 3.181 1.395 5.671 3.497 7.474 6.395 1.801 2.898 2.702 5.907 2.702 9.071 0 2.945-.8 5.708-2.397 8.308-1.598 2.602-4.011 4.694-7.237 6.292 4.166 1.222 7.37 3.304 9.61 6.248 2.24 2.945 3.36 6.422 3.36 10.432 0 3.227-.681 6.225-2.044 8.997z"></path>
</svg>
</div>
</div>
</div>
<h6 class="text-center">HTML5 - CSS3 - JQuery - Bootstrap 4</h6>
<p class="frontend-text">From the design process to initiaton and launch, I love utilizing the newest frontend technologies to construct beautiful, functional, and responsive interfaces. <span class="highlighted-text">HTML5</span>, <span class="highlighted-text">CSS3</span>, <span class="highlighted-text">Bootstrap 4</span> and <span class="highlighted-text">JQuery</span> are all used in most of my frontend projects. In fact, they were all incorporated to build this site. </p>
<br>
<br>
</div>
<div class="col-sm-6 col-xs-12 backend">
<h2 class="text-center">Backend Skills</h2>
<svg class="mysql" viewBox="0 0 128 128">
<path fill="#00618A" d="M2.001 90.458h4.108v-16.223l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108v-16.196c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976-1.304.395-1.936 1.159-1.936 2.739v16.197zM33.899 77.252h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0v-10.643h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417h-12.972v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z"></path><path fill="#E48E00" d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738h-11.535c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816.237.237.315.475.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026h-11.338v2.738zM100.511 85.692c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706v-2.738h-10.784c-2.41 0-3.318-.606-3.318-2.055v-14.168h-4.108v14.195zM77.503 85.834v-9.765c0-2.48 1.742-3.985 5.186-4.46.356-.053.753-.079 1.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395c-.752 0-1.543-.105-2.414-.343-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z"></path><path fill="#00618A" d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441-.9-1.735-1.786-3.631-2.585-5.458-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437-.427-.579-.854-1.341-1.149-2.011-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593c-.526-.01-.899.058-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z"></path>
</svg>
<svg class="php" viewBox="0 0 128 128">
<path fill="#6181B6" d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"></path>
</svg>
<svg class="python" viewBox="0 0 128 128">
<path fill="#FFD845" d="M49.33 62h29.159c8.117 0 14.511-6.868 14.511-15.019v-27.798c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191-12.355 2.181-14.453 6.751-14.453 15.176v10.817h29v4h-40.224000000000004c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53 2.075 8.642 7.03 14.659 15.515 14.659h9.946v-13.048c0-9.637 8.428-17.952 18.33-17.952zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zM122.281 48.811c-2.098-8.448-6.103-14.811-14.599-14.811h-10.682v12.981c0 10.05-8.794 18.019-18.511 18.019h-29.159c-7.988 0-14.33 7.326-14.33 15.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0 7.349-2.129 14.487-6.411 14.487-14.834v-11.126h-29v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"></path>
</svg>
<h6 class="text-center">SQL - PHP - Python</h6>
<p class="backend-text">For both web development and application development projects in the future, I've been trying my hand at the <span class="highlighted-text2">Python</span> programming language. I'm also picking up <span class="highlighted-text2">SQL</span> to become comfortable with database management. <span class="highlighted-text2">PHP</span> was utilized for the contact form on this site.</p>
<!--
<h2 class="text-center" id="additional-skills">Additional Skills</h2>
-->
<br>
<br>
<br>
<br>
<br>
<p class="copyright">© 2017 Gabby Rutherford</p>
</div>
</div>
</div>
</div>
</div>
<div class="nav-bar">
<h3>Gab's Tech <br><span class="space">Space</span></h3>
<ul class="nav-panel text-center">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="gabsTechSpace_about.js"></script>
</body>
</html>
You can use viewport units, vh, which are percentage of device height. If you want the upper part to never be cut off set it's heght to auto but you can't have both fit the screen if there is too much content.
Put a media query to set smaller font size on short screens if you think you can fit your content that way, like this
#media (max-height: 600px) {
.box {
font-size: 0.75rem;
}
}
Related
Thank you in advance.
I'm working on the mobile responsiveness of a challenge project and my media queries are only selectively working. Here is my full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontend Mentor | Sunnyside agency landing page</title>
</head>
<body>
<section class="splash_page">
<header>
<nav class="navbar">
<img src="./images/logo.svg" class="sunnyside_logo" alt="sunnyside_logo">
<ul class="nav_links">
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="intro_screen">
<h2>We are creatives</h2>
<img src="images/icon-arrow-down.svg" />
</div>
</section>
<section class="grid_card">
<div class="card_information">
<div class="transform_information_container">
<h2>Transform your brand</h2>
<p>We are a full-service creative agency specializing in helping brands grow fast.
Engage your clients through compelling visuals that do most of the marketing for you.</p>
<a>Learn More</a>
</div>
</div>
<div class="card_image">
<img src="./images/desktop/image-transform.jpg" />
</div>
</section>
<section class="grid_card_2">
<div class="card_information">
<div class="stand_out_information_container">
<h2>Stand out to the right audience</h2>
<p> Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters,
we’ll build and extend your brand in digital places.
</p>
<a>Learn More</a>
</div>
</div>
<div class="card_image">
<img src="./images/desktop/image-stand-out.jpg" />
</div>
</section>
<section class="grid_card_3">
<div class="card_image">
<div class="graphic_design_text">
<h2> Graphic Design</h2>
<p>Great design makes you memorable. We deliver artwork that underscores your brand message and captures
potential clients’ attention.
</p>
</div>
<img src="./images/desktop/image-graphic-design.jpg" />
</div>
<div class="card_image">
<div class="photography_text">
<h2>Photography</h2>
<p>Increase your credibility by getting the most stunning, high-quality photos that improve your business image.
</p>
</div>
<img src="./images/desktop/image-photography.jpg" />
</div>
</div>
</section>
<section class="testimonials">
<h2>Client Testimonials</h2>
<div class="testimonial_group">
<div class="single_testimonial">
<img src="images/image-emily.jpg" />
<p> We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always
hit.
</p>
<h3 class="testimonial_name">
Emily R.
</h3>
<small>Marketing Director</small>
</div>
<div class="single_testimonial">
<img src="images/image-thomas.jpg" />
<p> Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and
enjoyable experience.
</p>
<h3 class="testimonial_name">
Thomas S.
</h3>
<small>Chief Operating Officer</small>
</div>
<div class="single_testimonial">
<img src="images/image-jennie.jpg" />
<p> Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!
</p>
<h3 class="testimonial_name">
Jennie F.
</h3>
<small>Business Owner</small>
</div>
</div>
</section>
<section class="footer">
<div class="image_banner">
<img src="./images/desktop/image-gallery-milkbottles.jpg">
<img src="./images/desktop/image-gallery-orange.jpg">
<img src="./images/desktop/image-gallery-cone.jpg">
<img src="./images/desktop/image-gallery-sugarcubes.jpg">
</div>
<div class="banner_information">
<img src="./images/logo-footer.svg" class="logo_footer"/>
<div class="footer_nav">
<p>About</p>
<p>Services</p>
<p>Projects</p>
</div>
<div class="footer_links">
<svg class="facebook_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="instagram_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058zM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0zm0 4.865a5.135 5.135 0 100 10.27 5.135 5.135 0 000-10.27zm0 8.468a3.333 3.333 0 110-6.666 3.333 3.333 0 010 6.666zm5.338-9.87a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="twitter_logo" width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
<svg class="pinterest_logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.477 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.181-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.546 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.176-4.068-2.845 0-4.516 2.135-4.516 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.523 0 10-4.477 10-10S15.523 0 10 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Here is the entire CSS:
#import url('https://fonts.googleapis.com/css2?family=Barlow:wght#600&family=Fraunces:wght#700;900&display=swap');
:root {
--Soft-red: hsl(7, 99%, 70%);
--Yellow: hsl(51, 100%, 49%);
--Dark-desaturated-cyan: hsl(167, 40%, 24%);
--Dark-blue: hsl(198, 62%, 26%);
--Dark-moderate-cyan: hsl(168, 34%, 41%);
--Very-dark-desaturated-blue: hsl(212, 27%, 19%);
--Very-dark-grayish-blue: hsl(213, 9%, 39%);
--Dark-grayish-blue: hsl(232, 10%, 55%);
--Grayish-blue: hsl(210, 4%, 67%);
--White: hsl(0, 0%, 100%);
}
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
height: 100vh;
font-size: 18px;
}
h2, p, h3 {
margin: 0;
padding: 0;
}
.splash_page {
height: 100vh;
width: 100%;
background-image: url('./images/desktop/image-header.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
font-family: "Barlow";
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2em 3em;
}
.navbar > .nav_links {
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;
margin: 0;
width: 35%;
}
.navbar > .nav_links > li {
font-size: .90em;
}
.navbar > .nav_links > li > a {
text-decoration: none;
color: white;
}
.navbar > .sunnyside_logo {
width: 10em;
}
.navbar > .nav_links > li > .contact_button {
background-color: white;
padding: 1.25em 2em;
color: var(--Very-dark-desaturated-blue);
font-family: "Fraunces";
font-size: .85em;
font-weight: 900;
text-transform: uppercase;
border-radius: 30px;
}
.navbar > .nav_links > li > .contact_button:hover {
background-color: hsl(199, 100%, 75%);
color: white;
transition: .15s;
}
.intro_screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.intro_screen > h2 {
font-family: "Fraunces";
font-weight: 900;
font-size: 3.5em;
letter-spacing: .1em;
text-transform: uppercase;
color: white;
margin: 2em 0 1.65em 0;
}
.grid_card, .grid_card_2, .grid_card_3 {
display: flex;
/* max-height: 75vh; */
}
.grid_card_2 {
flex-direction: row-reverse;
}
.card_information, .card_image {
flex: 1;
}
.card_information {
display: flex;
justify-content: center;
align-items: center;
}
div[class$="information_container"] {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 22rem;
text-align: start;
}
div[class$="information_container"] > h2 {
font-family: "Fraunces";
font-weight: 900;
font-size: 2.5rem;
color: var(--Very-dark-desaturated-blue);
}
div[class$="information_container"] > p {
line-height: 1.75em;
font-size: 1.1em;
color: var(--Dark-grayish-blue);
font-family: "Barlow";
margin: 2rem 0 2rem 0;
}
div[class$="information_container"] > a {
font-family: "Fraunces";
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
color: var(--Very-dark-desaturated-blue);
position: relative;
align-self: flex-start;
padding: 0 .5em;
cursor: pointer;
}
div[class$="information_container"] > a::after {
content: '';
z-index: -1;
width: 100%;
height: 0.5rem;
position: absolute;
left: 0;
top: 70%;
border-radius: 1rem;
/* background-color: hsl(51, 95%, 83%); */
}
div[class^="transform"] > a::after {
background-color: hsl(51, 95%, 83%);
}
div[class^="transform"] > a:hover::after {
background-color: var(--Yellow);
transition: .15s;
}
div[class^="stand_out"] > a::after {
background-color: hsl(7, 91%, 91%);
}
div[class^="stand_out"] > a:hover::after {
background-color: var(--Soft-red);
transition: .15s;
}
.card_image > img {
width: 100%;
height: 100%;
}
.card_image {
position: relative;
display: flex;
justify-content: center;
}
.graphic_design_text, .photography_text {
position: absolute;
z-index: 1;
text-align: center;
bottom: 0;
margin-bottom: 5em;
width: 22em;
}
div[class$="_text"] > h2 {
margin-bottom: .8em;
font-size: 1.75em;
font-weight: 900;
font-family: "Fraunces";
}
div[class$="_text"] > p {
font-family: "Barlow";
font-size: 1em;
line-height: 1.65em;
}
.graphic_design_text > * {
color: var(--Dark-desaturated-cyan);
}
.photography_text > * {
color: var(--Dark-blue);
}
.testimonials {
/* height: 97vh; */
margin: 10em 0 10em 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.testimonials > h2 {
margin-bottom: 5em;
text-transform: uppercase;
letter-spacing: .4em;
font-size: 1.1em;
color: var(--Dark-grayish-blue);
font-family: "Fraunces";
}
.testimonial_group {
display: flex;
width: 70vw;
}
.single_testimonial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 .75em 0 .75em;
}
.single_testimonial > img {
border-radius: 50%;
width: 3.5em;
}
.single_testimonial > p {
font-family: "Barlow";
color: var(--Very-dark-grayish-blue);
margin: 3em 0 4em 0;
line-height: 1.5em;
text-align: center;
font-size: 1em;
}
.single_testimonial > .testimonial_name {
font-family: "Fraunces";
}
.single_testimonial > small {
font-family: "Barlow";
color: var(--Grayish-blue);
margin-top: 1em;
}
.footer {
/* max-height: 100vh; */
background-color: hsl(168, 57%, 72%);
display: flex;
flex-direction: column;
}
.footer > .image_banner {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
width: 100%;
/* margin: 1em 0 1em 0; */
/* height: 60vh; */
}
.footer > .image_banner > img {
width: 100%;
}
.banner_information {
width: 100%;
/* height: 40vh; */
display: flex;
flex-direction: column;
justify-content: center;
margin: 5em 0 5em 0;
}
.logo_footer {
align-self: center;
width: 9em;
margin-bottom: 2.5em;
}
.footer_nav {
width: 20em;
display: flex;
justify-content: space-between;
font-family: "Barlow";
color: var(--Dark-moderate-cyan);
}
.banner_information > .footer_nav {
align-self: center;
display: flex;
margin-bottom: 5em;
}
.banner_information > .footer_nav > *:hover {
color: white;
cursor: pointer;
transition: .15s;
}
.banner_information > .footer_links {
align-self: center;
display: flex;
justify-content: space-between;
width: 9em;
cursor: pointer;
}
.banner_information > .footer_links > svg:hover > path {
fill: white;
transition: .15s;
}
#media (max-width: 1440px) {
.intro_screen > h2 {
font-size: 3em;
margin: 2.5em 0 2em 0;
}
.graphic_design_text, .photography_text {
margin-bottom: 3em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: 1em;
}
div[class$="information_container"] {
max-width: 23em;
}
div[class$="information_container"] > h2 {
font-size: 2em;
}
div[class$="information_container"] > p {
font-size: .9em;
line-height: 1.5em;
}
div[class$="information_container"] > a {
font-size: .9em;
}
.testimonial_group {
width: 85vw;
}
}
#media (max-width: 1200px) {
.navbar > .nav_links {
width: 55%;
}
.graphic_design_text, .photography_text {
margin-bottom: 1.5em;
width: 20em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: .9em;
}
.testimonials {
margin: 7em 0 7em 0;
}
.testimonials > h2 {
font-size: 1em;
}
.single_testimonial > p {
font-size: .9em;
margin: 2em 0 3em 0;
}
};
#media (max-width: 992px) {
.intro_screen > h2 {
color: red;
}
};
#media (max-width: 600px) {
.grid_card, .grid_card_2, .grid_card_3 {
flex-direction: column-reverse;
}
.navbar > .nav_links {
display: none;
}
.intro_screen > h2 {
font-size: 1em;
}
.testimonial_group {
flex-direction: column;
}
};
My problem lies at the end of the CSS code:
#media (max-width: 1440px) {
.intro_screen > h2 {
font-size: 3em;
margin: 2.5em 0 2em 0;
}
.graphic_design_text, .photography_text {
margin-bottom: 3em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: 1em;
}
div[class$="information_container"] {
max-width: 23em;
}
div[class$="information_container"] > h2 {
font-size: 2em;
}
div[class$="information_container"] > p {
font-size: .9em;
line-height: 1.5em;
}
div[class$="information_container"] > a {
font-size: .9em;
}
.testimonial_group {
width: 85vw;
}
}
#media (max-width: 1200px) {
.navbar > .nav_links {
width: 55%;
}
.graphic_design_text, .photography_text {
margin-bottom: 1.5em;
width: 20em;
}
div[class$="_text"] > h2 {
font-size: 1.5em;
}
div[class$="_text"] > p {
font-size: .9em;
}
.testimonials {
margin: 7em 0 7em 0;
}
.testimonials > h2 {
font-size: 1em;
}
.single_testimonial > p {
font-size: .9em;
margin: 2em 0 3em 0;
}
};
#media (max-width: 992px) {
.intro_screen > h2 {
color: red;
}
};
#media (max-width: 600px) {
.grid_card, .grid_card_2, .grid_card_3 {
flex-direction: column-reverse;
}
.navbar > .nav_links {
display: none;
}
.intro_screen > h2 {
font-size: 1em;
}
.testimonial_group {
flex-direction: column;
}
};
The first two media queries, max-width: 1440px and max-width: 1200px, function perfectly.
The next two, max-width: 992px and max-width: 600px, do not function at all. The red color for the 992 entry is for testing purposes.
If I comment the first two entries out—the larger queries that work—the next one will actually function. I've also tried repositioning the media queries, but the same general problem occurs: the top queries will function, while the bottom ones will not.
I think the issue may stem from either my lack of min-height parameters, although I've tried adding those to the existing code and it breaks or tweaks their current function, or my query positioning. All help is much appreciated!
I am trying to place the span with the id email-status directly below the email input field, regardless of the viewport size in order to warn users when email is not correct.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,600,700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Ping coming soon page</title>
<script defer src="https://friconix.com/cdn/friconix.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<object type="image/svg+xml" data="images/logo.svg" class="logo">
<p class="warning">Your browser does not support SVG. Please update!</p>
</object>
<h1>We are launching <span>soon!</span></h1>
<p>Subscribe and get notified</p>
<form action="#" method="#" class="email-newsletter-form">
<input type="email" name="email" id="email" placeholder="Your email address...">
<span id="email-status">Please enter a valid email</span>
<button type="submit">Notify Me</button>
</form>
<img class="dashboard" src="images/illustration-dashboard.png" alt="Picture of dashboard" />
<footer>
<div class="social-icons">
<i class="fi-xnsuxl-facebook"></i>
<i class="fi-xnsuxl-twitter"></i>
<i class="fi-xnsuxl-instagram"></i>
</div>
<p>© Copyright Ping. All rights reserved.</p>
</footer>
</div>
</div>
</body>
</html>
CSS:
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Libre Franklin", sans-serif;
}
#media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
#media screen and (min-width: 1000px) {
html {
font-size: 20px;
}
}
/* Container */
.container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 5vh 0 0 0;
}
.container .content {
max-width: 640px;
max-height: 640px;
}
.container h1 {
font-weight: 300;
color: #969696;
}
.container h1 span {
color: #151f29;
font-weight: 700;
}
.container .dashboard {
width: 100%;
}
/* Form */
form {
display: flex;
margin: 30px 0 0 0;
}
input[type=email] {
width: 63%;
border-radius: 40px;
border: 1px solid #c2d3ff;
color: #c2d3ff;
text-indent: 20px;
}
input[type=email]::placeholder {
color: #c2d3ff;
}
input[type=email]:focus {
outline: none;
}
button[type=submit] {
background-color: #4f7df3;
color: #fff;
padding: 0.8rem 3.5rem;
border-radius: 40px;
border: none;
font-weight: bold;
width: 34%;
margin-left: auto;
box-shadow: 5px 8px 15px #c2d3ff;
}
button[type=submit]:focus {
outline: none;
}
button[type=submit]:hover {
opacity: 0.7;
cursor: pointer;
}
#media screen and (max-width: 630px) {
form {
display: block;
margin-bottom: 20px;
}
form input[type=email] {
width: 100%;
padding: 0.8rem 0;
margin-bottom: 20px;
}
form button[type=submit] {
width: 100%;
}
}
#media screen and (max-width: 320px) {
form {
width: 80%;
margin: auto;
padding: 10% 0 20% 0;
}
}
#media screen and (max-width: 229px) {
button[type=submit] {
padding: 0.3rem 3.5rem;
}
}
.dashboard {
margin-top: 10%;
}
.error {
border-color: #a94442;
}
/* Footer */
footer {
color: #969696;
}
footer i {
border-radius: 50%;
border: 1px solid #c2d3ff;
padding: 8px;
width: 16px;
height: 16px;
text-align: center;
font-size: 17px;
}
footer i:hover {
color: #fff;
background-color: #4f7df3;
border: 1px solid #4f7df3;
}
footer a {
color: #4f7df3;
margin-right: 0.7em;
}
Give your button an id like #button and use flex like this:
.email-newsletter-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#button #email {
flex: 1 1 0;
}
#email-status {
order: 3;
}
For mobile devices and smaller viewports use media queries like this:
#media screen and (max-width: 600px) {
#email-status {
order: 0;
}
}
So i made a responsive website but the website doesnt change when it should.
The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.
And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1
the CSS code
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
margin-left: auto;
margin-right: auto;
}
header {
padding-bottom: 1px;
}
footer {
text-align: center;
}
.logo {
border-radius: 10px;
height: 100px;
margin-top: 15px;
margin-bottom: 5px;
width: 178px;
margin-left: auto;
margin-right: auto;
display: block;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.style-nav ul {
list-style-type: none;
text-align: center;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.style-nav ul li a:hover {
color: black;
text-shadow: 2px 2px 10px #000000;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.hero {
background-image: url(../Images/Background.jpg);
background-size: cover;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
color: #FFFFFF;
text-align: center;
}
.infobox-tan {
background-color: #C29D73;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.infobox-grey {
background-color: #717A84;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
color: #FFFFFF;
text-align: center;
}
h1.small {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h2 {
font-size: 25px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 20px;
padding: 30px
}
h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 35px;
}
p {
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-bottom: 60px;
}
p.footertext {
color: gray;
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-top: 20px;
margin-bottom: 20px;
}
.button {
border-radius: 30px;
border: 2px #FFFFFF solid;
padding: 8px 15px;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 30px;
}
.button:hover {
color: #242424;
border: 2px #242424 solid;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.row:after {
clear: both;
}
.col {
width: 100%;
}
/*Tablet View*/
#media (min-width: 700px) {
.style-logo {
float: center;
}
body {
max-width: 778px;
}
.style-nav ul li {
display: inline-block;
}
h1.normal {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
.row:before,
.row:after {
content: "";
display: table;
padding: 5px;
color: #FFFFFF;
text-align: center;
}
.col-tablet {
width: 50%;
}
.col {
float: left;
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
}
/*Desktop View*/
#media (min-width: 1024px) {
.style-logo {
float: center;
}
.style-nav {
float: center;
}
.col-desktop {
width: 25%;
}
body {
max-width: 1200px;
}
}
<!doctype html>
<html>
<head>
<link href="CSS/Styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="logo" src="Images/Logo company.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Education</li>
<li>Photos</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<div class="hero">
<h3>Editor's Choice</h3>
<h4>Maarten Nauta</h4>
<h1 class="normal small">Webdesign</h1>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet">
<div class="infobox-tan">
<h2>Education</h2>
<p>And a summary of my achievements</p>
Read More
</div>
</div>
<div class="col col-tablet">
<div class="infobox-grey">
<h2>Services</h2>
<p>Graphic/Web design - Video/Photo editing</p>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
</div>
</main>
<footer>
<div class="row">
<div class="col">
<p class="footertext">©2018 Maarten Nauta</p>
</div>
</div>
</footer>
</body>
</html>
Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
With this tag your media queries will operate as though the screen is the standard 72 ppi.
You are missing the viewport meta tag
(...) Apple introduced the "viewport meta tag" in Safari iOS to let
web developers control the viewport's size and scale. Many other
mobile browsers now support this tag, although it is not part of any
web standard. Apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to
figure out exactly how to implement it in Fennec. For example,
Safari's documentation says the content is a "comma-delimited list,"
but existing browsers and web pages use any mix of commas, semicolons,
and spaces as separators.
<meta name="viewport" content="width=device-width, initial-scale=1">
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
I hope someone can help! When I minimize the browser screen on this code, everything is minimizing appropriately except for my body text. Not sure why this is happening! Can anybody find the issue in the HTML or CSS?
The HTML:
<!DOCTYPE html>
<!--
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>History: Skating Today</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="" name="description">
<meta content="" name="keywords">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="js/skel.min.js">
</script>
<script src="js/skel-panels.min.js">
</script>
<script src="js/init.js">
</script> <noscript>
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.header {
}
</style></noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="page">
<!-- Header -->
<div id="page">
<img alt="Black and white photo of boy skateboarding" height="" src=
"images/OldTimey.jpg" width="100%">
<div class="unit header">
<section>
<header>
<h3>Unit 1: Skateboarding, Then and Now<br>
Lesson 1/3</h3>
</header>
</section>
</div><!-- Main -->
<div class="container" id="main">
<div class="row">
<div class="3u">
<section class="sidebar">
<h4>Home</h4>
</section>
<section class="sidebar">
<h4><a href="Programme%20Overview.html">Programme
Overview</a></h4>
</section>
<section class="sidebar">
<h4><a href="Unit1.html">Unit 1: Skateboarding, Then
and Now</a></h4>
<ul class="style3">
<li><a href="History.html">Lesson 1: History of
Skateboarding</a></li>
<li><a href="Types.html">Lesson 2: Types of
Skating</a></li>
<li>Unit 1 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4><a href="Unit2.html">Unit 2: Why You Should
Skate</a></h4>
<ul class="style3">
<li><a href="EmotionalBenefits.html">Lesson 1:
Emotional and Physical Benefits</a></li>
<li><a href="SocialBenefits.html">Lesson 2: Social
and Enviromental Benefits (Plus a Few
More!)</a></li>
<li>Unit 2 Quiz</li>
</ul>
</section>
<section class="sidebar">
<h4>Unit 3: Safety & Upkeep</h4>
<ul class="style3">
<li><a href="SafePlace.html">Lesson 1: Determining Safe Places
to Skate</a></li>
<li><a href="Stopping.html">Lesson 2: How to Stop a
Board</a></li>
<li><a href="Rules.html">Lesson 3: Rules of the
Road</a></li>
<li>Lesson 4: Changing Your Bearings</li>
<li>Lesson 5: Adjusting Your Trucks</li>
</ul>
</section>
<section class="sidebar">
<h4>Extras: Skating Routes & Meet a Skater</h4>
<ul class="style3">
<li>From the Flag Poles</li>
<li>From the White Gates</li>
<li>From the Pavilion</li>
<li>Meet a Skater</li>
</ul>
</section>
</div>
<div class= "9u skel-cell-important"">
<header>
<h3>Skating Today</h3>
</header>
<p> While some people may still see skaters as
rebellious or alternative, skateboarding has once
again evolved. In places like Afghanistan, where
girls are not allowed to ride bikes but can
skateboard, the sport is used to engage and empower
youth (skateistan.org). Furthermore, although many
skaters still take part in skateboarding to perfect
tricks and take risks, skateboarding has become the
way that many people get from point A to point B.</p>
<p></p>
<p>While any type of skateboard may be used for
transportation, the longboard is having its heyday.
A longboard can range anywhere from 33 to 80 inches
and typically has softer wheels, making for a
smoother and more stable ride, perfect for
cruising, less experienced, and older skaters
(Ruibal 2006).</p>
<img src="images/header.jpg" width="736" height="189" alt=""/><br>
<div id="course description">
<br>
<p>This lesson is now complete. To continue to lesson 2, "Types of Skating", click <a href=
"Types.html">next</a>.</p>
</div>
</div>
</section>
</div><!-- Main -->
</div>
</div>
</div>
</body>
</html>
And the CSS:
#charset "UTF-8";
/*
Ex Machina by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body {
background-image: url(../images/BackgroundImage.jpg);
}
body,input,textarea,select {
font-family: Verdana,Geneva,sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.5em;
}
h1,h2,h3,h4,h5,h6 {
letter-spacing: 1px;
font-weight: 300;
color: #1b1b5e;
}
h4
{
letter-spacing: 1px;
font-weight: 700;
color: #1b1b5e;
}
/* Change this to whatever font weight/color pairing is most suitable */
strong,b {
font-weight: 700;
color: #000;
}
em,i {
font-style: italic;
}
/* Don't forget to set this to something that matches the design */
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
sub {
position: relative;
top: .5em;
font-size: .8em;
}
sup {
position: relative;
top: -.5em;
font-size: .8em;
}
hr {
border: 0;
border-top: solid 1px #ddd;
}
blockquote {
border-left: solid .5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
p,ul,ol,dl,table {
margin-right: ;
margin-bottom: 1em;
color: #1b1b5e;
}
tr. highlight td {
padding: 2em;
}
header {
margin-bottom: .5em;
line-height: 2.5em;
color: #1b1b5e;
}
header h2 {
font-size: 24px;
text-align: left;
}
header h3 {
font-size: 22px;
}
footer {
margin-top: 1em;
}
/* Sections/Articles */
section,article {
margin-bottom: 1em;
}
.row
{
padding: 0;
position; center;
}
.intro {
text-align: left;
padding-bottom: 2em;
font-weight: 700;
}
.aims {
padding-top: 2px;
}
.unit header {
text-align: right;
margin-right: 1em;
color: purple;
}
table,th,td {
border: ;
border-collapse: collapse;
align-content: center;
}
th,td {
padding: 5px;
}
.boxed {
border: 1px solid #000;
padding: 2%;
margin-right: 10%;
margin-bottom: 2em;
}
* {
margin: 0;
padding: 0;
outline: none;
}
.formativequiz {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
background: ;
text-align: left;
}
.formativequiz h1 {
font: bold;
}
.formativequiz p {
font: bold;
}
.question {
overflow: auto;
margin: ;
width: 80%;
background: #fff;
}
.question h2 {
float: left;
margin: 0 40px;
color: blue;
font: bold;
}
.question h2:hover {
color: #333;
cursor: pointer;
}
.question p {
float: left;
margin-right: 0;
color: #fff;
font: bold 0;
-webkit-transition: color .3s ease;
-moz-transition: color .3s ease;
-ms-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
h2:active ~ .yes {
color: #1b1b5e;
font-size: ;
}
.course description {
margin-bottom: 3em;
padding-right: 10%;
}
#icons {
height: 128;
text-align: justify;
border: none;
font-size: .1px;
/* IE 9 & 10 don't like font-size: 0; */
max-width: 888px;
}
#icons div {
display: inline-block;
margin-top: 3em;
margin-bottom: 3em;
padding-right: 10%;
}
#icons:after {
content: '';
width: 100%;
/* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
/* Images */
.image {
display: block;
margin: 2em;
}
.image img {
display: block ;
width: ;
margin: 2em;
padding: 2em;
}
.image.featured {
display: block;
width: 100%;
margin: 0;
}
.image.full {
display: block;
width: 100%;
margin-bottom: 2em;
}
.image.left {
float: left;
margin: 0 2em .8em 0;
}
.image.centered {
display: block;
margin: 0 0 .8em;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default {
margin-bottom: 0;
padding-bottom: 0;
list-style: none;
}
ul.default li {
display: block;
padding: 2em 0 1.25em;
border-top: 1px solid #303030;
}
ul.default li:first-child {
padding-top: 0;
border-top: none;
}
ul.default a {
text-decoration: none;
color: rgba(255,255,255,.5);
}
ul.default a:hover {
}
ul.style1 {
margin: 0;
padding: 0;
list-style: none;
}
ul.style1 li {
padding: .6em 0;
}
ul.style1 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style1 img {
}
ul.style2 {
text-align: left;
margin-right: 10%;
padding: 2%;
list-style: disc;
padding-bottom: 1em;
}
ul.style2 li {
padding: .5em 0 0;
list-style-position: inside;
}
ul.style2 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style3 {
margin: 0;
padding: 5px;
list-style: none;
font: 14px;
}
ul.style3 li {
padding-left: .6em;
line-height: 150%;
}
ul.style3 li:first-child {
padding-top: 0;
border-top: 0;
}
ul.style5 {
overflow: hidden;
margin: 0 0 1em;
padding: 0;
list-style: none;
}
ul.style5 li {
float: left;
padding: .25em;
line-height: 0;
}
ul.style5 a {
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page {
margin: 7em;
position: center;
background: #fff;
}
#main {
padding: 1em;
}
#container {
position: center;
margin: 1em;
padding: 1em;
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.greenleaf {
align-content: relative;
}
.trafficlight {
align-content: relative;
}
.pinkskater {
}
.map {
}
Add media queries to your CSS to define you font sizes for various window sizes. Here's a simple example from this post (written in Sass):
html {
font-size: 16px;
#media (min-width: 800px) {
font-size: 18px;
}
#media (min-width: 1200px) {
font-size: 20px;
}
}
The problem appears to be that in your css you set the font size of body in pixels. try changing it to em instead of px and it should adjust in size. But it's hard to tell with so much going on.