Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
@SkyC0der i moved it down but i still cant get it go over to the right
Jarren
@Jarren5cent
@SkyC0der thanks, I think you helped me out by answering @ACSlater8
CamperBot
@camperbot
jarren5cent sends brownie points to @skyc0der and @acslater8 :sparkles: :thumbsup: :sparkles:
:star2: 1746 | @skyc0der |http://www.freecodecamp.com/skyc0der
:warning: @acslater8's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Gulsvi
@gulsvi
@ACSlater8 What is 8 + 9 ? :)
You can only have 12 columns inside a <div class="row">
@Jarren5cent happy to help lol
Jarren
@Jarren5cent
@SkyC0der think you can help me move my gifs up?
https://codepen.io/Jarren5cent/pen/bRpxOQ
Gulsvi
@gulsvi
@Jarren5cent Start by moving all of your inline styles into your CSS.
It's a lot of padding, absolute positioning, and widths + heights that are going to move things around
ACSlater8
@ACSlater8
@SkyC0der haha im sorry i know frustrating but i do appreciate the help
Jarren
@Jarren5cent
so css will help reduce that?
Gulsvi
@gulsvi
@ACSlater8 No worries, it can be hard to figure out at first
@Jarren5cent No, but it will help to see what's going on better - easier to debug/maintain.
Definitely don't mess with the width of items inside a bootstrap column
Jarren
@Jarren5cent
ok i'll try
Gulsvi
@gulsvi
And don't use position absolute for general placement
Jarren
@Jarren5cent
@SkyC0der if I get rid of that class, the gif disapears
Gulsvi
@gulsvi
@Jarren5cent This is how to get two images side by side in bootstrap:
  <div class="row">
    <div class="col-sm-6">
      <img class="img-responsive center-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
    <div class="col-sm-6">
      <img class="img-responsive center-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
  </div>
no inline styling needed, no CSS
Jarren
@Jarren5cent
I'll use it! thanks for the advice!
Gulsvi
@gulsvi
@Jarren5cent Since you're using Bootstrap 4, it's slightly different:
  <div class="row">
    <div class="col-sm-6">
      <img class="img-fluid mx-auto d-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
    <div class="col-sm-6">
      <img class="img-fluid mx-auto d-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
  </div>
ACSlater8
@ACSlater8
@SkyC0der would i put in a new div in order to move it
Jarren
@Jarren5cent
@SkyC0der those both worked
Gulsvi
@gulsvi
@ACSlater8 This would make the text on the left really small (1/12 of a row) and the text on the right really big (11/12 of a row).
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-11"></div>
  </div>
@Jarren5cent Resize the screen - only the second chunk of code is responsive for your version of bootstrap
@ACSlater8 This makes the text on the left the same distance from the edge of the screen as the text on the right:
  <div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6"></div>
  </div>
Does that make sense?
Jarren
@Jarren5cent

metakingnotes

thanks for the lessons @SkyC0der
CamperBot
@camperbot
jarren5cent sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: jarren5cent already gave skyc0der points
ACSlater8
@ACSlater8
@SkyC0der i think i got it! thank you
CamperBot
@camperbot
acslater8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1747 | @skyc0der |http://www.freecodecamp.com/skyc0der
ACSlater8
@ACSlater8
@SkyC0der can you take a look to make sure it looks ok?
Will
@Will-is-Coding
@ACSlater8 You may want to add overflow-x: hidden; to your body CSS, so that the photos aren't wider than the window. Also, the text is difficult to read on the second section, but I suppose that's more obvious. Looking like a good start :thumbsup:
Jarren
@Jarren5cent
img-fluid mx-auto d-block how do you guys learn all these classes
Long Nguyen
@longnt80
@Jarren5cent from the bootstrap doc
Gulsvi
@gulsvi
image.png
Jarren
@Jarren5cent
and you just keep learning new classes until you know which ones should be used?
thanks for the link, that helps!
Long Nguyen
@longnt80
@Jarren5cent you need to learn plain css first to understand which property to use
the classes in bootstrap just call that property
Gulsvi
@gulsvi
@ACSlater8 Your first row has a col-md-11 in it, then another row, with a col-md-2 and a col-md-8.