I’m in the middle of designing my portfolio and it seems like I can’t do even the simplest things such as setting the width of a photo without checking all the different scenarios for which a user might be accessing my site. Here’s an example:
Honestly it’s getting to be a total nightmare figuring out how I want a page laid out, and then rotating the phone screen to find that everything is busting out of where it’s supposed to be. Does anyone have any tips for handling stuff like this? Should I design a completely different site for mobile just to break it up?
Here’s my code:
<div id="about">
<div class="row">
<div class="title col-xs-7 col-md-3" id="about_title">
<div class="container-fluid">
<h3>About</h3>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-lg-2 col-lg-offset-1" class="no-margin" id="about_img">
<img class="img-fluid" src="img/profile.jpg">
</div>
<div class="col-xs-6" id="about_content_side">
<strong>Hello,</strong>
<p>My name is Sam Cole.</p>
<p>
I'm a full stack web developer located in the Twin Cities.
I will be graduating from the University of St. Thomas in May 2018.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-10 col-lg-offset-1" id="about_content_bottom">
<p>
<h5>Education</h5>
I am pursuing a Bachelor of the Arts with a major in Computer and Information Sciences and German at the <a href="https://www.stthomas.edu/">University of St. Thomas</a>
</p>
<p>
<h5>Languages and Technologies</h5>
<div id="skills_icons">
<div class="row">
<div class="col-xs-4">
<i class="devicon-html5-plain-wordmark"></i>
</div>
<div class="col-xs-4">
<i class="devicon-css3-plain-wordmark"></i>
</div>
<div class="col-xs-4">
<i class="devicon-javascript-plain"></i>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<i class="devicon-bootstrap-plain-wordmark"></i>
</div>
<div class="col-xs-4">
<i class="devicon-sass-original"></i>
</div>
<div class="col-xs-4">
<i class="devicon-jquery-plain-wordmark"></i>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<i class="devicon-php-plain"></i>
</div>
<div class="col-xs-4">
<i class="devicon-mysql-plain-wordmark"></i>
</div>
<div class="col-xs-4">
<i class="devicon-apache-line-wordmark"></i>
</div>
</div>
</div>
</p>
</div>
</div>
</div>
</div>
#about {
background: $red;
height: 100vh;
padding-top: 5vh;
font-size: 2vh;
}
#about_img {
padding: 5px;
background: rgb(120, 138, 163);
border-radius: 5px;
box-shadow: $shadow-main;
}
#about_img img{
border-radius: 5px;
}
.row {
margin-right: 0;
margin-left: 0;
}
#skills_icons {
text-align: center;
font-size: 6vh;
.row{
padding: 5px;
}
}
#about_title {
background: $blue-main;
box-shadow: $shadow-main;
height: 8vh;
margin-bottom: 3vh;
}
#about_title h3 {
margin: 0;
line-height: 8vh;
}
#about_content_side {
padding-top: 2vh;
}
#about_content_side strong {
font-size: 4vh;
}
#about_content_side p {
margin: 1vh 0;
}
#about_content_bottom {
padding-top: 2vh;
h5 {
padding-top: 1vh;
font-size: 2.5vh;
font-weight: 700;
}
a {
font-weight: 700;
color: $stthomas;
}
}