Hi everyone,
I’m working on my portfolio page and for the projects area I have three images next to each other (sm columns) and I’m not sure why the third image is stacked under the second one. I would like them to be even across the screen.
I feel like there’s probably a dumb little mistake somewhere. That’s usually what happens with me. Thank you in advance.
While I look at your code try moving the <link>
and <script>
tags into the settings. It is assumed that the HTML editor is already working within <body>
tag.
Edit:
Also move the <meta>
tags into the settings.
Alright, they should all moved into settings now.
In the second image:
<div class="col-sm-4">
<p>Shooting Star</p>
<a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/5500046668529664">
<img class="img-responsive" style="width:100%" src="https://www.w3schools.com/bootstrap/birds2.jpg" alt="Image">
<div class="col-sm-4"> <!-- LOOK HERE! -->
</a>
</div>
There’s a stray opening <div>
tag there.
I think you’re also missing class="img-responsive"
in the third image
Also don’t use <center>
; it’s deprecated. Center content using CSS instead.
Wow, I didn’t even see that extra div I made. That fixed it! Thanks!