Can't get image to stack centered above centered text for mobile

Question

On a desktop, everything is displaying as it should, but I'm trying to make it responsive so that on mobile and tablet devices the image displays centered above the centered text. Any help would be greatly appreciated!!

 html{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;} body{ font-size:14px; font-family: 'Montserrat', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;} h1, h2, h3, h4, h5, h6{ font-weight:700; line-height: 1em; text-transform:uppercase; } h1{ font-size:3em; margin-bottom:15px;} h2{ font-size:2.2em; margin-bottom:15px;} h3{ font-size:1.9em; margin-bottom:10px; margin-top:20px; } h4{ font-size:1.5em; margin-bottom:10px; margin-top:15px;} h5{ font-size:1.2em; margin:10px 0 5px; line-height:1.8em} h6{ font-size:1em;} p, label{margin:10px 0 10px; line-height:1.8em; font-size:12px; font-weight:300;} ul, ol{margin:15px 0 15px 30px;line-height:1.8em; font-size:1em; } strong{font-weight:700;} .alignleft{text-align:left !important;} .aligncenter{text-align:center !important; margin-left:auto !important; margin-right:auto !important;} .alignright{text-align:right !important;} .preload{height:0;} .white{color:#FFF; font-weight:bold;} .white-bg{background:#FFF;} a{ color:inherit; text-decoration:none; cursor:pointer;} a:hover{cursor:pointer;} #wrapper{position:relative; overflow-x:hidden;} .wrap{max-width:1200px; margin:0 auto; position:relative;height:100%;} .clear{clear:both !important; height:0 !important; padding:0 !important; margin:0 !important; float:none !important;} blockquote{ padding:0 20px; margin-bottom:15px;} /** FORM ELEMENTS **/ input[type=text],input[type=password],input[type=datetime],input[type=datetime-local],input[type=date],input[type=month],input[type=time],input[type=week],input[type=number],input[type=email],input[type=url],input[type=tel],input[type=color],input[type=search],select,textarea{border: 1px solid #AAA; height:auto; -webkit-border-radius:0; border-radius:0; -webkit-box-shadow:none !important; box-shadow:none !important;font-family: 'Montserrat', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; padding:15px 20px; font-size:1em;} select{-webkit-appearance:none;-moz-appearance: none; appearance: none; text-indent:10px; line-height:24px;border:1px solid #AAA; background:#FFF url(../images/select.png) no-repeat 97% center;} select option:disabled{color:#AAA;} textarea{height:140px;} input[type=text]:focus, textarea:focus{border-color:#d0101f;} input[type=submit], input[type=button], input[type=reset], .button{font-weight:normal; cursor:pointer; margin:10px auto; font-size:1em; border:none; display:inline-block; padding:20px; color:#FFF;background:#3572a9; text-transform:uppercase; text-align:center; min-width:100px; width:150px;} input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover{} #back-to-top{width:32px; height:32px; line-height:30px; -webkit-border-radius:3px; border-radius:3px; background:none; right:20px; bottom:20px; position:fixed;} #back-to-top:hover{} #imagelightbox{position: fixed; z-index: 9999; -ms-touch-action: none;touch-action: none;} #imagelightbox-overlay{background-color: #FFF;background-color: rgba( 255, 255, 255, .9 );} body#error{background:url(../images/404-bg.jpg) no-repeat top center; background-size:cover; height:100vh;color:#ffde16 !important;} body#error .wrap{max-width:1200px;} body#error .wrap .inner{padding-top:15vh; width:50%;} body#error h1{font-size:15em; margin:0 0 200px;} .social{list-style:none; margin:20px 0 0 0px; padding:0;} .social li{display:block; float:left; width:30px; height:30px; padding:0;-webkit-transition: all 400ms ease;-moz-transition: all 400ms ease;-ms-transition: all 400ms ease;-o-transition: all 400ms ease;transition: all 400ms ease; margin-right:10px; text-align:center;} .social li a{display:block; font-size:14px; line-height:30px; width:100%; height:100%; color:#ffffff;} .socialfoot li a{display:block; font-size:24px; line-height:30px; width:100%; height:100%; color:#ffffff;} /********* HEADER *********/ .topbar{background: #3572a9; padding:10px;} .topbar p{float:left; margin:0;} nav ul ul,nav ul ul:before{background:#FFF;position:absolute} nav ul li:after,nav ul ul:before{content:'';margin:0 auto;left:0;right:0} header{position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease;} header .wrap{padding:0 30px;} header #logo{float:left;margin:0 30px 0 0;} header #logo img{height:70px} header nav{float:right;padding:0;} header .social{float:right; margin-left:30px; margin-top:0; margin-right:10px; font-weight:bold; color:#ffffff} topbar p.social{float:right;} nav ul{margin:0;padding:0;text-transform:uppercase;cursor:pointer} nav>ul li a,nav>ul li span{ padding:16px 0 20px; display:block} nav li{display:inline-block;padding:0 20px;font-size:.8em;position:relative; text-align:center;} nav li a,nav li span{color:#1a1a1a;} nav li ai,nav li span i{display:block !important; font-size:16px !important; margin-bottom:10px;} nav ul ul{-webkit-border-radius:3px;border-radius:3px;display:none;top:125px;left:50%;width:320px;z-index:3;padding:10px;text-align:left;transform:translate(-50%,0);-webkit-box-shadow:0 0 20px 2px rgba(0,0,0,.3);box-shadow:0 0 20px 2px rgba(0,0,0,.3)} nav ul ul:before{top:-5px;width:10px;height:10px;transform:rotate(45deg)} nav ul ul ul{top:0;left:240px} nav ul ul.show{display:block} nav ul ul li{float:none;line-height:30px;font-size:.9em}nav ul ul a{line-height:30px!important} nav ul ul a:after{display:none} nav ul li:after{position:absolute;bottom:0;height:5px;width:0;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease} nav ul li.active:after{width:100%}nav ul li.active>ul{display:block} #mobile,nav .mobilenav{display:none} /********* BANNERS *********/ #cta{padding:0; margin-top:0; position:relative; z-index:2;} #cta .wrap{max-width:none;} #cta .cta{float:left; width:25%; height:240px; text-align:center; padding:0; position:relative;background:#FFF; overflow:hidden;} #cta .cta img{display:block; margin:0 auto; object-fit:cover; max-width:100%;} #cta .cta h4{text-transform:uppercase;color:#FFF; position:absolute; top:10px; left:0; right:0; text-align:center;text-shadow:2px 0 3px #000;} #cta .cta p{ font-size:.9em; line-height:1.1em; margin:10px 25px; color:#333;} #cta .button{margin:0 auto; width:360px; display:block;} #secondary #hero{height:360px;background:#e2e2e2;} #secondary #hero .wrap{padding:0 50px;} #secondary #hero h1{font-size:calc(1vw + 3vh + 1vmin); color:#000; padding-top:250px; text-align:center; text-transform:none;} #secondary #hero h1 span{ display:block;} #content .image, #content .content{width:50%; float:right; position:relative; min-height:400px; z-index:1; top:0} #content .content{padding:30px 2% 30px 4%; width:44%; min-height:400px;} #content .content.empty{top:0; height:0; display:none;} #content .image .inner{position:absolute; top:0; left:0; right:0; width:100%; height:100%;} #content .image.right, #content .image:nth-child(4n){float:left;} #content .image img, #content .image iframe{position:absolute; top:0; left:0; height:100%; min-height:400px; z-index:1; padding-bottom:30px; padding-top:30px;} #content .image iframe{width:100%; height:auto;} #content .image:nth-child(4n) img{left:auto; right:0;} #content .content:nth-child(5n){padding:30px 4% 30px 2%;} #content hr{border:none; height:0; clear:both;margin:0;} #content h2{font-size:3em;position:relative; margin-bottom:40px;color:#1a1a1a; text-al} #content h2 span{color:#ffc000;} #content h3{font-size:2.5em;text-align:left; position:relative; margin-bottom:20px;color:#1a1a1a;} #contact h3{font-size:2.5em;text-align:left; position:relative; margin-bottom:20px;color:#3572a9; text-align:center; text-transform:none; font-family:Montserrat;} .beforeContactspan{float:left; margin:0 3% 0 0; width:65%;} #content h4{font-size:1.8em;color:#1a1a1a;} #content h6{color:#3572a9;} .team-description{padding-bottom:150px; width:49%; float:left;} .work h2{text-align:center;color:#1a1a1a;} .thumb{float:left; width:25%; position:relative; overflow:hidden; height:280px;} .thumb img{position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%); min-height:100%; min-width:100%;} #banner{height:400px; margin-bottom:50px; position:relative; overflow:hidden;} #banner .image{background:url(../images/slider.jpg) no-repeat center center; background-size:cover; position:absolute; top:0; left:0;width:100% !important;} .upright-monuments #banner .image{background-image:url(../images/user_uploads/uprightbanner.jpg);} .flat-markers #banner .image{background-image:url(../images/user_uploads/markerbanner.jpg);} .vases-benches #banner .image{background-image:url(../images/user_uploads/vasebanner.jpg);} #testimonialbanner{background:url(../images/banner-testimonial.jpg) no-repeat center center fixed; background-size:cover; color:#FFF; padding:150px 0; text-align:center;} #testimonialbanner .wrap{position:relative} #testimonialbanner h2{font-size:3em; padding-left: 20px; text-transform:uppercase;} #testimonialbanner h2 span{ display:block; font-size:.5em;} #testimonialbanner .message{position:relative;max-width:768px;margin:0 auto;z-index:2; text-align:left;} #testimonialbanner p{font-size:1em; padding-left: 20px;max-width:768px; margin:0 auto;} .quote{position:absolute;z-index:1;color:#FFF;font-size:15em;font-family: 'Passion One', cursive; opacity:.3;} .quote.open{top:-67px;left:-10%} .quote.close{bottom:-120px;right:-10%} #content .testimony { float: left; width: 28%; margin: 0 1% 20px; padding: 20px 1%; border: 1px solid #CCCCCC;} #content .testimony .testimony-description {display : none;} #content .testimony h4, #content .testimony h6 {text-align : center;} #secondary #content .testimony h4 {font-size : 1.2em;} #content .testimony h6 {height : 32px;} #content .testimony p { height : 75px;} #content .testimony .button {margin: 15px auto 0;display: block;width: 140px;} #partnerbanner{background:url(../images/banner-partner.jpg) no-repeat center center fixed; background-size:cover; color:#FFF; padding:150px 0; text-align:center;} #partnerbanner h2{font-size:84px; padding-left: 20px; text-transform:uppercase;} #partnerbanner h2 span{color:#55aefe;} #partnerbanner p{font-size:12px; padding-left: 20px;max-width:768px; margin:0 auto; font-weight:500; width:65%;} #partnerbanner .button{background:#FFF; color:#3572a9; font-weight:bold; width:13%;} #partnerbanner1{background:url(../images/abs1.jpg) no-repeat center center fixed; background-size:cover; color:#000; padding:150px 0; text-align:center;} #partnerbanner1 h2{font-size:4em; padding-left: 20px; text-transform:uppercase;} #partnerbanner1 h2 span{color:#55aefe;} #partnerbanner1 p{font-size:1em; padding-left: 20px;max-width:768px; margin:0 auto; font-weight:500; padding:40px;} #cta3{background:url(../images/s2.jpg) no-repeat center center fixed; background-size:cover; color:#FFF; padding:150px 0; text-align:center;} #cta3 p{font-size:10px;color:#000000;font-family:montserrat;padding:15px;} #cta3 img{margin:0 auto;} .teamleft {} .team .img{display:block; margin:0 auto; max-height:300px; padding:50px; float:left;} .team:nth-child(even) .img{float:right;} .team h5{color:#1a1a1a; font-size:36px; padding-top:30px; text-transform:none;} .contact-us .address{text-align:right; color:#696969; border-bottom:1px solid #CCC; text-transform:uppercase; padding:10px 0;} .contact-us .address strong{text-align:left; float:left; color:#1a1a1a; font-weight:normal;} #map{height:460px; width:100%;} .mapRight{padding-top:30px; height:460px; background:#2c669a; color:#fff;} .doc{width:100%; text-align:left; margin:20px 0; display:inline-block; height:auto;position:relative;background:#FFFFFF;overflow:hidden;border:1px solid #CCCCCC;} .doc.video{width:48%} .doc .cap{width:100%;background:#EEE;position:relative;height:180px;overflow:hidden;border-bottom:1px solid #CCCCCC} .doc .cap .icon{width:60px;height:75px;margin:50px auto;text-align:center;color:#FFFFFF;position:relative;font-size:24px;line-height:75px;background: #1a1a1a;} .doc .cap .icon:after{position:absolute;content:'';top:-15px;right:-15px;width:25px;height:25px;transform:rotate(45deg);background:rgba(255, 255, 255, .5)} .doc p{margin:10px;line-height:16px; color:#1a1a1a;font-family: 'Montserrat';} .doc.doc-small img{width:auto;max-height:100% !important;max-width:none} /********* FOOTER *********/ footer .wrap{padding:0 30px;} footer .logo{float:left;} footer .logo img{height:80px; display:block; margin:0 auto;} footer ul{list-style:none; margin:0 ; padding:0;text-transform:uppercase; float:none;} footer ul li{display:inline-block; padding:0 15px;} footer .social{display:inline-block;} footer nav{float:none;} footer nav ul li{float:none;} footer nav ul li i{display:none !important;} footer .mobilenav{display:inline-block;} footer li.close.mobilenav{display:none;} footer nav>ul li a, footer nav>ul li span{padding:10px 0 0; color:#fff; font-weight:bolder; font-family:montserrat; font-size:16px;} footer ul ul{display:none;} footer #copyright{padding:0 0; margin-top:0; margin-right:60px;} footer .dev{background:url(../images/iwwlogo.png) no-repeat center center; text-indent:-999em; margin:0 0 0 20px; display:inline-block; width:20px; height:25px; position:absolute; bottom:0; right:40px;} .footer-company-name{font-family:Montserrat; font-size:12px; padding-top:10px;} /********* IMAGE SLIDER *********/ #hero{position:relative; overflow:hidden; z-index:-143; background:url(../images/user_uploads/sec1.jpg) no-repeat center center;} form .row{max-width:800px;margin:0 auto; clear:both;} form h4{ text-align:center; margin:30px auto 20px;} form .button{ margin:30px auto 0;} form .panel{} form .panel.hide{display:none;} /********* ANIMATIONS *********/ @keyframes slidedown { from {top:-200px;} to {top:0;} } /********* MODAL AND OVERLAY *********/ .overlay {position: fixed;z-index: 9999;left: 0;right: 0;top: 0;width: 100%;height: 100%;opacity:.8;display: none; background:#000;} .modal { position: fixed; top: -1000px;max-width: 800px;padding: 50px;left: 0;right: 0; margin: 0 auto; z-index: 10000;-moz-transition: all 400ms linear;-ms-transition: all 400ms linear;-o-transition: all 400ms linear;transition: all 400ms linear;-webkit-transition: all 400ms linear; background:#FFF; box-shadow:0 0 40px rgba(0,0,0,.3);} .modal .inner {position: relative;overflow-y: scroll;min-height: 30vh;max-height:75vh;} .modal .modalclose {color: #c2c2c2;position: absolute;top: 10px;right: 20px;font-size: 3em;} *, *:before, *:after {box-sizing: border-box;} .controls {padding: 1rem; text-align:center;} .control {position: relative; display: inline-block; cursor: pointer; background:none; border:none; font-size:1em;font-family: 'Montserrat'; text-transform:uppercase;color:#696969;} .mixitup-control-active{color:#1a1a1a;} .mixitup-control-active[data-filter]:after {position:absolute; content:''; width:100%; height:3px; bottom:-5px; left:0; right:0; background: #1a1a1a;} .control[data-filter] + .control[data-sort] {margin-left: .75rem;} .container {padding: 1rem; text-align: left;font-size: 0.1px;} .container:after { content: ''; display: inline-block; width: 100%;} .mix, .gap { display: inline-block;vertical-align: top; float:left;} .mix { width:23%; margin:20px 1%; height:200px;position: relative; overflow:hidden;} .mix[style*="display: none;"]{height:0; padding:0;} .mix[style*="display: none;"] img{height:0; width:0;} .mix a{position:absolute;} .mix img{max-width:100%;} .mix:before {content: ''; display: inline-block; padding-top: 56.25%;} .ctadiv{ float:left; width:30%; box-sizing:border-box; background-color:#fff; margin-right:25px; box-shadow:0px 0px 50px #000; padding:20px; height: 320px; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ctaicons{ max-width:30%; } .cd-image-container { position: relative; width: 90%; max-width: 768px; margin: 0em auto; } .cd-image-container img { display: block; } .cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-resize-img .cd-image-label { right: auto; left: 0; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #dc717d url("../img/cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } .cd-handle.draggable { /* change background color when element is active */ background-color: #445b7c; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; } .heroh1{ color:#fff; font-size:calc(.8vw + 3vh + 1vmin); text-shadow:0px 0px 5px #000000; } .heroh1 span{ font-size:calc(1.6vw + 3vh + 1vmin); line-height:1.1; } .heroh2{ color:#fff; font-size:calc(0.25vw + 1.1vh + 1vmin); text-shadow:0px 0px 2px #000000; } .quotebutton{ background-color:#fff; border:none; text-align:center; display:inline-block; margin:4px 2px; font-size:14px; height:40px; width:200px; color:#295f90; font-weight:bolder; margin-top:20px; margin-bottom:25px; } .quotetext{ color:#5d8eba; } .contactline1{ text-align:center; font-weight:bolder; } .address2{ text-align:center; font-weight:bolder; font-size:20px; } .address3{ text-align:center; font-weight:bolder; font-size:14px; line-height:.7; } .contactbreak{ border-top:2px solid #fff; width: 100px; } .ctaphrase{ color:#3572a9; font-size:24px; font-family:Montserrat; text-transform:uppercase; padding-top:20px; } @media only screen and (max-width: 1200px) { #cta3 .wrap { padding-left:20px !important; } #cta3 .wrap .ctadiv{ min-height:400px; } } @media only screen and (max-width: 820px) { #cta3 .wrap { padding-left:20px !important; width:100%; margin-left:50px; } #cta3 .wrap .ctadiv{ min-height:400px; width:80%; margin:auto; margin-bottom:20px; } } 

 <div id="hero" <?php if($rows["image"]){?>style="background:url(./images/user_uploads/<?=$rows["image"];?>) no-repeat center center; background-size:cover;"<?php }?>> <div class="wrap"> <?php if($rows["callout"] != ''){ $pagetitle = $rows["callout"];}else{$pagetitle = $rows["cms_page_name"];}?> <h1><?=htmlspecialchars_decode($pagetitle);?></h1> </div> </div> <?php include_once("./includes/aboutprime.php");?> <section id="content" style="background-color:#e2e2e2; padding-left:60px; padding-right:60px; padding-bottom:40px; padding-top:40px;"> <div class="wrap" style="background-color:#e2e2e2;"> <?php $content = $rows["cms_page_text"]; $content = preg_replace( '/<p>\\s*(<a .*>)?\\s*(<img .* \\/>)\\s*(<\\/a>)?\\s*<\\/p>/iU', '\\1</div><div class="image"><div class="inner">\\2</div></div><div class="content">\\3', $content ); $content2 = preg_replace( '/<p>\\s*(<iframe .*><\\/iframe>)?\\s*<\\/p>/iU', '</div><div class="image right"><div class="inner">\\1</div></div><div class="content">\\2', $content ); if ($content2 != $content ){ echo '<div><h3>GET TO KNOW US</h3> <h1>Our Team</h1></div>'; }else{ echo '<div><h3 style="text-align:center; font-size:18px; color:#3572a9;">GET TO KNOW US</h3> <h1 style="text-align:center; font-size:48px; text-transform:none;">Our Team</h1></div>'; } print_r( $content2 ); ?> </div> <div class="clear"></div> <?php $teamsql = "SELECT * FROM team order by id ASC"; $teamresults = mysqli_query ( $dbh, $teamsql ) or die( "Error : " . mysqli_error ( $dbh ) ); while ( $team = mysqli_fetch_array ( $teamresults ) ) { ?> <div class="team" id="team_<?= $team[ "id" ]; ?>"> <div class="img" style="width:49%"> <?php if($team[ 'image' ] ==''){?> <img src="images/team-placeholder.jpg" alt="<?= $team[ 'name' ]; ?>"> <?php }else{?> <img style="width:90%;" src="images/user_uploads/<?= $team[ 'image' ]; ?>" alt="<?= $team[ 'name' ]; ?>"> <?php }?> </div> <div class="bio" style="width:49%; float:right;"> <h5><?= $team[ 'name' ]; ?></h5> <h6><?= $team[ 'title' ]; ?></h6> <div class="team-description" style="width:85%;"> <?= $team[ 'description' ] ?> </div> </div> <div class="clear"></div> </div> <?php } ?> </div> <div class="clear"></div> </div> </section> <?php include_once("./includes/banner-testimonials.php");?> 

I've tried everything I can think of, but no matter what it seems to just shrink the image. 48-50% on each element didn't help, it looks great on desktops, it's just awful on mobile devices.

Answer 1

Try using media queries to adjust the style on smaller devices:

// when the screen width is 600 pixels or less...
@media (max-width: 600px) {

  .team .img {
    width: 100% !important;
    padding: 0;
    float: none;
  }

  .team .bio {
    width: 100%;
    float: none;
  }

}

That code should make it go from this:

To this:

Answer 2

Your question is difficult to understand, but I'm going to assume that you're referring to the images of the team members in relation to their bio paragraphs.

To get these to stack vertically at lower screen resolutions, you'll need to remove the width on your .bio and .img class divs, then they should revert back to their default behavior and stack vertically.

Try removing your inline styles, and set your widths appropriately in the CSS file using @media queries.

Hope that helps.