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
Gulsvi
@gulsvi
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.
ACSlater8
@ACSlater8
yeah but i made a new col so isnt that ok
@SkyC0der i have it in the postion i want but i dont think that it has been coded correctly
@SkyC0der if you open it up to the actual page on codepen its in the right postion i wanted the items like that in the bubble but i dont think i used the col correctly
ACSlater8
@ACSlater8
@SkyC0der nevermind its all messed up now :(
Jorge
@flawedLogic506
lol @ the mug
Angelo Hijada
@aymodez
hi guys
looking for some help
doing my random quote machine project
I'm going to create a button to reset the quote machine to its original image.. but can't seem to figure out how to revert my (2, crossfade effect) photos back to its original
Mauricio Salas
@MauriSg99
How can I put "Aspiring..." under the main heading, what am I doing wrong with the divs? https://codepen.io/MauriSg/pen/RgKaXx
Angelo Hijada
@aymodez

my css:

}
.img-container {
width: 45%;
height: auto;
margin-right: auto;
margin-left: auto;
float: center;
display:list-item;
position: relative;
}

.img-container img {
width: 45%;
height: auto;
}
.img-hidden {
bottom:0;
position: absolute;
opacity:0;
filter: alpha(opacity = 0);
width: 100%;
height: auto;
z-index:1000;
transition:opacity 1.5s;
-moz-transition:opacity 1.5s;
-webkit-transition:opacity 1.5s;
display: block;
}

target-hidden:target {

opacity:1;
filter: alpha(opacity = 100);
transition:opacity 1.5s;
-moz-transition:opacity 1.5s;
-webkit-transition:opacity 1.5s;

}

Mauricio Salas
@MauriSg99
How can I put "Aspiring..." under the main heading, what am I doing wrong with the divs? https://codepen.io/MauriSg/pen/RgKaXx
Ken Haduch
@khaduch
@MauriSg99 - where are you trying to put "Aspiring..."? I don't see it in your CodePen?
Mauricio Salas
@MauriSg99
As a subheading, sorry I sent the last update
Ken Haduch
@khaduch
@MauriSg99 - you are assigning your .h1 class using position: absolute; which puts it out of the normal "flow" of the HTML layout. You would have to also use absolute positioning to get anything else aligned with that, which is going to be a painful way to go. You could try putting both of those in a div element that has position:absolute controlling it, perhaps that would work? Or take away the absolute positioning and use some padding-top to move those title elements down from the very top of the page. And just rely on the normal HTML and browser layout characteristics.