Why is my image stretching at the media query with display flex - css

Question

I have an image with a class of author-pic, its working how I want it to, except on the second to last media query it's stretching horizontally, when display flex is set. I know you're not supposed to use % with children of display flex, however author-pic is not an immediate child, does this mean you cant use % on any children when using display flex? If so how can I fix this because flex-basis doesnt seem to work either, I'm assuming because author-pic isnt an immediate child.
https://jsfiddle.net/svb0gxgg/2/
#media screen and (min-width: 400px){
.author-pic{
min-width: 300px;
width: 25%;
height: 25%;
float: left;
margin: 0 .5em;
}
section h2{
font-size: 1.5em;
}
section h3{
font-size: 1.3em;
}
/***home page***/
.home-page-greeting{
font-size: 1.8rem;
}
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 113px;
height: 180px;
}
.front-of-book-front:before{
width: 133px;
height: 17px;
transform: translate(8px,105px) rotate(90deg);
-moz-transform: translate(8px,105px) rotate(90deg);
}
.front-of-book-front:after{
width: 83px;
height: 14px;
transform: translate(0,21px);
-moz-transform: translate(0,21px);
}
.bar{
width: 95px;
height: 10px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(42px,-45px);
-moz-transform: rotate(90deg) translate(42px,-45px);
}
.book-back p{
font-size: .4rem;
margin: 2.9em 1.9em;
}
.book-side{
width: 176px;
height: 10px;
top:-3px;
}
header{
height: 130px;
display: flex;
justify-content: center;
}
header h1{
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
border: 8px solid black;
}
header nav{
display: block;
align-self: flex-end;
position: initial;
width: initial;
}
.main-nav{
display: flex;
justify-content: flex-end;
width:initial;
}
.main-nav li{
border-radius: 8px;
padding: 5px;
font-size: 1.3rem;
background-color: transparent;
margin: 0 4px;
width:initial;
}
.drop-menu{
top: 34px;
}
.drop-menu li{
margin: 0;
border-radius: 0;
}
/***charactor page*****/
.character-pic{
width: 25%;
height: 25%;
}
}
#media screen and (min-width:860px){
body{
background-position: center;
}
header{
height: 120px;
justify-content: space-between;
}
header h1{
margin: 0 0 0 20px;
}
.main-nav li{
font-size: 1.5rem;
}
header nav{
margin: 0 40px 0 0;
width: initial;
}
.drop-menu{
top: 38px;
}
section h2{
font-size: 1.8em;
}
/***home page***/
.amazonBookLabel{
font-size: 1.5em;
}
/**home page book**/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 200px;
height: 320px;
}
.front-of-book-front{
perspective: 200px;
}
.front-of-book-front:before{
width: 234px;
height: 37px;
transform: translate(11px,185px) rotate(90deg);
font-size: 1em;
line-height: 37px;
}
.front-of-book-front:after{
width: 146px;
height: 26px;
transform: translate(0,32px);
}
.bar{
width: 172px;
height: 23px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(74px,-82px);
font-size: .7em;
}
.bar p{
display: block;
padding: 12px 5px 0 0;
}
.book-side{
width: 312px;
height: 10px;
top:-1px;
left: -5px;
}
.book-back p{
font-size: .7em;
margin: 3.3em 2.3;
}
/*****author page******/
.authorWrapper{
display: flex;
margin: auto;
}
.authorWrapper :nth-child(1){
flex-basis: 75%;
}
.authorWrapper :nth-child(2){
flex-basis: 25%;
}
}

Answer 1

If you want an image to scale properly you need only use width or only use height. Your image looks weird because you have the height set at 25%. Remove that and it should work. If you need to use both make sure you have the ratio correct, eg 4:3

Answer 2

use align-items. The default value is stretch, which is being applied here. Looks like you want to use flex-start instead.
/*************general*********************/
html,
body {
min-height: 100vh;
}
body {
margin: 0px;
// background-image: linear-gradient( 0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg");
-moz-background-image: linear-gradient( 0, rgba(0, 0, 0, .8) 30%, rgba(0, 150, 255, .8) 100%), url("images/mainCover.jpg");
background-position: 40%;
background-repeat: no-repeat;
background-size: cover;
}
img {
max-width: 100%;
}
h1,
h2,
h3 {
font-family: arial;
text-align: center;
margin: 20px auto;
}
ul {
list-style: none;
text-align: center;
padding: 0;
}
a:visited,
a {
color: black;
}
section {
margin: 1%;
color: white;
}
section > article {
padding: 1em;
background-color: rgba(0, 0, 0, .5);
border-radius: 15px;
margin: 10px;
}
section h2,
section h3 {
text-align: center;
}
section h2 {
font-size: 1.3em;
text-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
}
section h3 {
font-size: 1.1em;
}
article:after {
content: "";
display: block;
clear: both;
}
/*nav and header*/
header {
background-color: rgba(255, 165, 0, .8);
display: flex;
flex-flow: row wrap;
justify-content: center;
border-bottom: 8px solid black;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
font-size: 1.5em;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
// background-color: rgba(255,165,0,.8);
}
.main-nav {
margin: 0;
width: 100%;
color: white;
font-family: arial;
font-weight: 600;
}
nav ul li {
text-align: center;
border: 1px solid white;
border-radius: 15px;
font-size: 1.2rem;
background-color: rgba(255, 165, 0, .8);
width: 100%;
}
.drop-menu-back {
display: none;
width: 100%;
}
a {
text-decoration: none;
}
nav a:visited,
nav a,
h1 {
color: white;
}
.main-nav .current-page {
background-color: rgba(0, 0, 0, .5);
}
/****drop down menu****/
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
visibility: hidden;
display: block;
top: 38px;
white-space: nowrap;
left: -2px;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity 300ms ease-in-out 0s;
z-index: 1;
}
.characters:hover .drop-menu {
visibility: visible;
opacity: 1;
}
/*******************home page*********************/
.home-page-greeting {
color: white;
text-align: center;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.bookWrapper {
width: 25%;
margin: auto;
}
.bookLink {
display: block;
margin: auto;
}
.bookImage {
margin: 35px auto;
display: block;
//max-height: 300px;
}
.amazonBookLabel {
background-color: rgba(0, 0, 0, .5);
color: white;
padding: 10px;
font-weight: 600;
border-radius: 20px;
margin: 30px auto;
text-align: center;
position: relative;
max-width: 200px;
}
.amazonBookLabel:after {
content: "";
width: 30px;
height: 5px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
bottom: -5px;
left: calc(50% - 17px);
}
.amazonBookLabel:before {
content: "";
width: 0;
height: 0;
border-left: 40px solid rgba(0, 0, 0, .5);
border-top: 40px solid transparent;
position: absolute;
bottom: -45px;
transform: rotate(-45deg);
transform-origin: top left;
left: calc(50% - 30px);
}
/***home page book***/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 100px;
height: 160px;
position: relative;
perspective: 800px;
}
.book {
margin: 52px auto;
transition: transform 1s ease-in-out 0s;
-moz-transition: transform 1s ease-in-out 0s;
}
.book-front {
position: relative;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-origin: left;
-moz-transform-origin: left;
transition: transform 1s ease-in-out 0s;
-moz-transition: transform 1s ease-in-out 0s;
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, .5);
perspective: 400px;
perspective-origin: -200px;
}
.front-of-book-front {
background-image: url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 47%;
backface-visibility: hidden;
}
.front-of-book-front:before {
content: "Seraph Chronicles: Evangelion";
text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
font-size: .5em;
line-height: 15px;
color: white;
width: 119px;
height: 15px;
background-color: rgba(255, 165, 0, .5);
position: absolute;
text-align: center;
transform: translate(8px, 93px) rotate(90deg);
-moz-transform: translate(8px, 93px) rotate(90deg);
}
.front-of-book-front:after {
content: "";
width: 75px;
height: 12px;
background-color: rgba(255, 165, 0, .5);
position: absolute;
transform: translate(0px, 19px);
-moz-transform: translate(0px, 19px);
}
.bar {
width: 80px;
height: 8px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(36px, -45px);
-moz-transform: rotate(90deg) translate(36px, -45px);
}
.bar p {
padding: 2px 3px 0 0;
display: block;
}
.back-of-book-front {
backface-visibility: hidden;
background-color: rgb(240, 234, 214);
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
position: absolute;
top: 0;
}
.book-front:hover {
transform: rotatey(-180deg);
}
.book:hover {
transform: rotate(10deg);
}
.book-back {
position: absolute;
top: 0;
background-color: rgb(240, 234, 214);
z-index: -1;
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .5);
text-align: justify;
}
.book-back p {
font-size: .3rem;
margin: 2.9em 1.9em;
}
/**********author page********/
.author-pic {
display: block;
margin: auto;
width: 200px;
;
}
section article {
padding: 1em;
background-color: rgba(0, 0, 0, .5);
border-radius: 15px;
margin: 10px;
clear: both;
}
address {
margin: 15px auto;
width: 125px;
font-family: arial;
}
.email {
background-image: url("images/mail-icon.png");
background-repeat: no-repeat;
background-size: contain;
background-position: 0 50%;
}
.email a,
.facebook a,
.email:visited,
.facebook:visited {
color: white;
font-style: normal;
font-weight: 500;
}
address a {
display: block;
line-height: 19px;
}
.facebook {
background-image: url("images/facebook-icon.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 0 50%;
}
/*******characters page********/
.charater-pic {
width: 100%;
}
/***responsive***/
#media screen and (max-width: 400px) {
.drop-menu {
top: -97px;
width: 100%;
}
.drop-menu-back {
display: block;
width: 100%;
position: relative;
line-height: 22px;
}
.characters:hover {
border-radius: 15px;
}
.drop-menu-back span {
padding: 0;
font-size: .8em;
margin: 0 .5em 0 0;
}
.drop-menu {
background-color: transparent;
}
footer {
height: 100px;
}
}
#media screen and (min-width: 400px) {
.author-pic {
min-width: 300px;
width: 25%;
height: 25%;
float: left;
margin: 0 .5em;
}
section h2 {
font-size: 1.5em;
}
section h3 {
font-size: 1.3em;
}
/***home page***/
.home-page-greeting {
font-size: 1.8rem;
}
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 113px;
height: 180px;
}
.front-of-book-front:before {
width: 133px;
height: 17px;
transform: translate(8px, 105px) rotate(90deg);
-moz-transform: translate(8px, 105px) rotate(90deg);
}
.front-of-book-front:after {
width: 83px;
height: 14px;
transform: translate(0, 21px);
-moz-transform: translate(0, 21px);
}
.bar {
width: 95px;
height: 10px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(42px, -45px);
-moz-transform: rotate(90deg) translate(42px, -45px);
}
.book-back p {
font-size: .4rem;
margin: 2.9em 1.9em;
}
.book-side {
width: 176px;
height: 10px;
top: -3px;
}
header {
height: 130px;
display: flex;
justify-content: center;
}
header h1 {
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
border: 8px solid black;
}
header nav {
display: block;
align-self: flex-end;
position: initial;
width: initial;
}
.main-nav {
display: flex;
justify-content: flex-end;
width: initial;
}
.main-nav li {
border-radius: 8px;
padding: 5px;
font-size: 1.3rem;
background-color: transparent;
margin: 0 4px;
width: initial;
}
.drop-menu {
top: 34px;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
/***charactor page*****/
.character-pic {
width: 25%;
height: 25%;
}
}
#media screen and (min-width:860px) {
body {
background-position: center;
}
header {
height: 120px;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 20px;
}
.main-nav li {
font-size: 1.5rem;
}
header nav {
margin: 0 40px 0 0;
width: initial;
}
.drop-menu {
top: 38px;
}
section h2 {
font-size: 1.8em;
}
/***home page***/
.amazonBookLabel {
font-size: 1.5em;
}
/**home page book**/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 200px;
height: 320px;
}
.front-of-book-front {
perspective: 200px;
}
.front-of-book-front:before {
width: 234px;
height: 37px;
transform: translate(11px, 185px) rotate(90deg);
font-size: 1em;
line-height: 37px;
}
.front-of-book-front:after {
width: 146px;
height: 26px;
transform: translate(0, 32px);
}
.bar {
width: 172px;
height: 23px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(74px, -82px);
font-size: .7em;
}
.bar p {
display: block;
padding: 12px 5px 0 0;
}
.book-side {
width: 312px;
height: 10px;
top: -1px;
left: -5px;
}
.book-back p {
font-size: .7em;
margin: 3.3em 2.3;
}
/*****author page******/
.authorWrapper {
display: flex;
margin: auto;
align-items: flex-start;
}
.authorWrapper:nth-child(1) {
flex-basis: 75%;
}
.authorWrapper:nth-child(2) {
flex-basis: 25%;
}
}
#media screen and (min-width: 1109px) {
header h1 {
font-size: 3em;
margin: 0 0 0 80px;
}
.main-nav > li {
margin: 0 8px;
}
header nav {
margin: 0 80px 0 0;
}
/***home page***/
.home-page-greeting {
font-size: 2.5rem;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item">Home</li>
<li class="main-nav-item">About</li>
<li class="main-nav-item characters">
Characters
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item current-page">Author</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="authorWrapper">
<article class="aboutAuthor">
<h2>About the Author</h2>
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="picture of author, Kyle Feller" class="author-pic">
<p>sd t yghjiu hgfdwert yuikjn dnmkjhjh jhbnjhn jhnjhnmkjn mkjhnjhn mkjhnmkjn mkjn mkwjnedkj njhbnkjnmkj nmkjnm kjnmkjnmkj hnmkjnmk jnmjhbcnk jcbnjkj bnkjnbnk jnkjnnk jnkj nkj nknk jn nkjn bnkjnbnkm nnmknmkmn kjnkmnkjnmkj nmjnjnmk jnmjnmkjnb jxncbcjbnkj
nbnjkjhb njhnbkj njnbnkjnk jnmjhnmjn mkjnmjnm jnjnbnmjnj njhnmkjh nbnjnbnk jnbnjkjnj kjnkjnkjn kjnbnkjnbn kjnbnkj nbnkjn nknbnjnb nkjnbnmnn kjnnmmn kjnkmnkj mnkjnkjn nkjmnkjm nkjmnkm jcncc ncncncncnc ncnc ncnncnc ncncnc
</p>
</article>
<article>
<h2>Contact Me</h2>
<ul>
<li><address class="email">Email Me</address></li>
<li><address class="facebook"> Follow Me</address></li>
</ul>
</article>
</div>
</section>
</main>
<footer>
</footer>