I need help on putting elements side by side? personal portfolio

1

Basically for my about me section I want to have my image on the right and then the text going down the left beside it like this: https://codepen.io/freeCodeCamp/full/YqLyXB

I have been trying different things like col-md-4 in a div and flloat-right but its not working, heres what I have: https://codepen.io/SarahTheTomboy/pen/OjorMe?editors=1100

2

Hi,

You need to wrap that content in a row (i.e. div class="row"). Then, inside the row, you can use the sizing classes like col-md-4 to set them up.

So it might look something like this:

<div class="row">
  <div class="col-md-8">
    put your about me text in here
  </div>
  <div class="col-md-4">
    put your image here
  </div>
</div>

Once you get that working you can start experimenting and seeing what you like and don’t like.

3

Just put the image above the text in html.I think u want like below right?

4

<p class=“p”><img class=“profile float-right” src=“https://unsplash.it/g/200/300”>Aspiring Web Developer, who is starting out on her coding journey through the use of Free code Camp and other resources. Also enjoys rock climbing and has always had a great interest in technology and computers and finding out how things such as apps and websites work.</p>

i had the same problem,try this

if this solves the problem

5

You should read more about the grid system here if you intend to use Bootstrap. A very simple way to achieve the effect you are after is like this (using Bootstrap 4):

<div class="container-fluid about">
  <div class="row">
    <div class="col align-self-center text-sm-right text-center">
      <p class="about-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a lectus consequat, hendrerit massa ac, rutrum neque. Donec velit nunc, porttitor in finibus quis, rutrum at dolor. Aenean congue metus in ipsum aliquam fringilla. Aliquam iaculis ex eu purus posuere, eu tempus nibh lobortis. Donec eu hendrerit lectus.</p>
    </div>
    <div class="col-sm-auto col-12 text-center">
      <img class="profile-image mx-auto" src="https://unsplash.it/g/200/300">
    </div>
  </div>
</div>

Aside from the grid system, these are the other Bootstrap utilities used in the code above: text alignment, self alignment, horizontal centering.

Some feedback:

  • Your background image isn’t working (the website you are linking the image from doesn’t allow to link images directly)
  • You can’t nest a <body> tag inside your elements.
  • Try using more descriptive classes for your elements. It will help you identify them better when your CSS will be longer.
  • Link your other files (font awesome and the Lobster font) in the pen settings, you shouldn’t have them in the HTML panel.
6

is there a way i can test if my background image is working? in debug mode on codepen and my github page: https://thetomboysarah.github.io/

it works for me?

thanks for the feedback I do agree I am a bit lost in the deep end here but learning :slight_smile:

7

Since you already have a Github account\page, I would recommend uploading your images there and using the link from Github, you can be sure they’ll work then (even on Codepen).

Just be sure the URL looks like this when linking them outside of Github:

https://raw.githubusercontent.com/your_github_username/your_repository/master/path/to/img.jpg

To have it like this, just open the image (or file) you need on your github account, append “?raw=true” at the end of the URL in the address bar and press enter.

No problem, and no worries!