I'm having trouble adjusting the spacing between the #bigimage and #textarea elements while keeping them centered as a col-12 on small screens.
Do you think using a media query would solve this issue? I attempted to place them in a separate container, but encountered unexpected behavior when testing it on mobile devices.
The colored borders in the code below are there for my own reference. As a beginner, any feedback on my code would be greatly appreciated.
header {
border: 3px solid red;
text-align: center;
margin-top: 30px;
}
li {
display: inline;
text-align: center;
padding: 3%;
}
img {
width: 300px;
}
ul {
border: 2px solid green;
margin-bottom: 20px;
margin-top: 40px;
}
h2 {
border: 2px solid yellow;
margin-top: 30px;
}
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 30px;
width: 200px;
}
#bigimage {
border: 3px solid green;
text-align: center;
}
p {
border: 2px solid red;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
}
#mainstuff {
width: 50% margin: 0 auto;
border: 3px solid yellow;
}
.container {
border: 5px solid blue;
}
.row {
margin-top: 30px;
position: relative;
}
img {
border: 2px solid red;
}
#textandphoto {
width: 800px;
}
@media (min-width: 1500px) {
.container {
max-width: 900px;
}
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1>Raphael Hetherington</h1>
<h2>11+ Tutor</h2>
<ul>
<li><a href="">About Me</a></li>
<li><a href="">11+ Tuition</a></li>
<li><a href="">Programming</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact</a></li>
</ul>
</header>
</div>
</div>
<div class="row" id="mainstuff">
<div class="col-12 col-md-6" id="bigimage">
<img src="//lorempixel.com/400/200/abstract/5/" alt="">
</div>
<div class="col-12 col-md-6" id="textarea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
</div>
</div>
</div>