Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 2020 20:09
    @krisb1220 banned @Gastony
  • May 14 2020 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 2020 22:38
    @bjorno43 banned @real-action
  • Feb 01 2020 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 2020 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 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
Alexis
@alexisgcn
i almost finish my random quote machine, but i dont know how to make that my text has the same transition to the colors
Rommon
@r0mmon
who can help me for review my code. I'm confused with the scope and all of the code has turned into one function. How to make the variables. If i stand var out, i get undefined because asynchrony.
https://codepen.io/r0mmon/pen/bpNjpN
Ritvars
@RitvarsZ
@alpox But how exactly do I do it? Do I make my own media queries, or just use foundation or some other framework?
alpox
@alpox
@RitvarsZ Well, is it this exact page you want to make responsive? Then i would say media queries.
Do you build the page newly? Then a framework would be good
But it wouldn't be easy at all to pack a framework into an already existing page.
Ritvars
@RitvarsZ
@alpox I have to make the whole site responsive - every page of it.
alpox
@alpox
@RitvarsZ Media queries it is :-)
Ritvars
@RitvarsZ
@alpox Well, time to study media queries then :D
alpox
@alpox
Building a page up and then make it responsive is nasty and a long hard job.
Thats why there is the mobile-first approach :D
Ritvars
@RitvarsZ
@alpox Thanks!
CamperBot
@camperbot
ritvarsz sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 735 | @alpox |http://www.freecodecamp.com/alpox
Jacob Leatherwood
@dadleatherwood
Can I get some help on my project? https://codepen.io/dadleatherwood/pen/BpLegq
alpox
@alpox
@dadleatherwood Sure
Jacob Leatherwood
@dadleatherwood
@alpox How can I center my buttons in my header top to bottom?
Alexis
@alexisgcn
@r0mmon you miss the property get in your dictioary
alpox
@alpox
@dadleatherwood center them top to bottom? do you mean you want them listed upon each other?
@dadleatherwood You would have to put them into an unordered list which spans on the whole width
Jacob Leatherwood
@dadleatherwood
@alpox I want them centered in the middle of the nav bar, top to bottom. I thought I could do this by changing the margins, but was unsuccessful. Then I tried display:inline, but that didn't seem to work either.
alpox
@alpox
@dadleatherwood
.nav {
  height: 100px;
  background: white;
  text-align: center;
}
This centers the links in the middle of the page
If you want them stacked you need another approach. Its best to pack them in a list anyways
Alexis
@alexisgcn
@dadleatherwood you can use flexbox to center whatever you want
Jacob Leatherwood
@dadleatherwood
@alpox Made those changes. Now will you look at it?
Now they are stacked on top of one another, and have dots to the left of the nav bar.
Alexis
@alexisgcn
the header is the div father, and your nav is the son, your header tag must have display:flex; and your nav have properties display: flex;
align-items: center;
justify-content: center;
alpox
@alpox
@dadleatherwood stacked would be:
.header .btn {
  text-decoration: none;
  background: white;
  color: #58BD91;
  border-radius: 5px;
  font-size: 25px;
}

.nav ul {
  list-style-type: none;
}
<ul>
        <li><a href="#" class="btn" target="blank">About</a></li>
        <li><a href="#" class="btn" target="blank">Portfolio</a></li>
        <li><a href="#" class="btn" target="blank">Contact</a></li>
      </ul>
Alexis
@alexisgcn
@dadleatherwood do you like flexbox ?
alpox
@alpox
@alexisgcn Not sure if flexbox is ready to use yet. It depends on the browser compability requirement.
Alexis
@alexisgcn
you can use the prefix
alpox
@alpox
@alexisgcn That doesn't help for every browser. Compability for older browsers would still not be guaranteed.
The prefix only specifies the usage of experimental implementations of the browser engines but there are quite some which don't even have that
Milos Ratkovic
@Shadow032
@dadleatherwood just writte this under your .nav
.nav {
  background: white;
  padding: 30px 0;
  text-align: right;
}
Jacob Leatherwood
@dadleatherwood
@alpox Now, how would I get them side by side instead of on top of one another?
Milos Ratkovic
@Shadow032
@dadleatherwood delete height: 100%
alpox
@alpox
@dadleatherwood Ah you wanted them side by side anyway? Top to bottom told me something else :D
Jacob Leatherwood
@dadleatherwood
@alpox Yeah, I just wanted the spacing different.
Alexis
@alexisgcn
ok @dadleatherwood look this is my header on codepen, if it can help you good,
alpox
@alpox
@dadleatherwood
.nav li {
  display: inline-block;
  padding: 0 10px;
}
Ah maybe i understood you wrong still
@dadleatherwood If you wanted to also align it vertically, you can do:
.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}
Milos Ratkovic
@Shadow032
hey guys, anybody here can help me with weather app ? this is my code pen http://codepen.io/Shadow032/pen/wgzqgz
Jacob Leatherwood
@dadleatherwood
@alpox Alright, we almost have it. Now, how can I bring the words down so they are more centered on the navbar?
alpox
@alpox
Be aware that your body also has some margin defined... you may want to remove it with
html, body {
  padding: 0;
  margin: 0;
}
Milos Ratkovic
@Shadow032
@dadleatherwood I have them centered just right with your code just do the padding thing
alpox
@alpox
@dadleatherwood Ah look at my last comment for that centering :-)
@dadleatherwood If you wanted to also align it vertically, you can do:
.nav ul {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style-type: none;
}
Jacob Leatherwood
@dadleatherwood
@alpox Thank you so much! I am sure it is a silly question, but I am very new.
CamperBot
@camperbot
dadleatherwood sends brownie points to @alpox :sparkles: :thumbsup: :sparkles: