kgoode517 kgoode517 - 22 days ago 5
CSS Question

Image will not fix center on tablet screen sizes and smaller

I am attempting to fix a personal website project where I have a image that refuses to be centered on mobile/tablet screen sizes. I have tried all manner of custom css but to no avail.I have quite a few media queries at different sizes, however I can't find any conflicting styles.I am using the bootstrap framework on this project. The website is here.

Here is my html

<div class="about">
<a name="abouty"></a>
<h1 class="text-center">About</h1>
<p class="text-center" id="myth">The man...The myth...The legend</p>
<article>
<div class="img-wrap">
<img id="pic" src=" http://goodedevelopment.com/images/selfie.JPG" alt="A picture of myself,one handsome devil">
</div>
<p class="bio">
Kyle Goode is a young, caffeine dependent, Nashville local. He went to school in a small town just West of Nashville where he met and married his high school sweetheart. It is in that small town that Kyle's passion for technology began.Kyle has been amazed
with technology and programming even as a child,from trying to read code and quickly realizing he couldn't read the long "words" it was making to taking apart the family computers, much to the chagrin of his parents. Though his adult life has
been spent in the medical field, Kyle is excited to begin transitioning his hobby and passion to his profession.
</p>
</article>

<div class="container" id="mine">
<h1 class="text-center" id="kyle">Kyle Goode-the man in bullet points</h1>
<ul class="text-left" id="profile">
<li>Good Samaritan</li>
<li>Prefers puns intended</li>
<li>Especially gifted napper</li>
<li>Devoted to both programming and Game of Thrones</li>
<li>Codes for fun</li>
<li>Making History</li>
<li>Goes into survival mode if tickled</li>
<li>Anxiously awaiting you to connect with him for projects.</li>
</ul>
</div>
</div>


And here is my CSS,many thanks for any and all help.

@media screen and (max-width: 767px)
#pic {
overflow: auto;
margin: auto;
position: absolute;
left: 0;
bottom: 157px;
right: 0;
}
@media screen and (max-width: 825px)
#pic {
width: 119%;
height: auto;
position: relative;
right: -209px;
top: 229px;
}
@media screen and (max-width: 965px)
#pic {
width: 130%;
height: auto;
position: relative;
right: -222px;
top: 264px;
}
@media screen and (max-width: 1040px)
#pic {
width: 133%;
height: auto;
position: relative;
right: -280px;
top: 231px;
}
@media screen and (max-width: 1100px)
#pic {
height: 315%;
width: auto;
position: relative;
right: 400px;
top: 6px;
}
@media screen and (max-width: 1199px)
#pic {
width: auto;
height: 388%;
position: relative;
right: 446px;
}
@media screen and (max-width: 1300px)
#pic {
height: 390%;
width: auto;
position: relative;
right: 436px;
}
@media screen and (max-width: 1450px)
#pic {
width: 295%;
height: auto;
}
#pic {
width: auto;
height: 348%;
position: relative;
top: 10px;
right: 415px;
}
.img-wrap img {
width: 100%;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer

You're over doing it with the media queries and the relative positioning. You mention Bootstrap, but there's almost no Bootstrap features being used.

When it comes to your About Me section and using Bootstrap I would use markup similar to this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-sm-push-8 col-md-6 col-md-push-0">
      <img class="img-responsive center-block" src="http://placehold.it/600x800/fc0/&text=pic">
    </div>
    <div class="col-xs-12 col-sm-8 col-sm-pull-4 col-md-6 col-md-pull-0">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
      </ul>
    </div>
  </div>
</div>

Above is just a demo and you'll need to adjust some things to suite your specific needs but should get you where you need to go.

I'm used column resets, offsetting columns and column ordering to achieve the desired layout at various viewport sizes.