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
Andrew Hickman
@ahickman3
@SkyC0der its just coincidence, i didnt even know that was a class name on bootstrap lol
Gulsvi
@gulsvi
I learned that by using bootstrap, getting comfortable with it, and then by studying how bootstrap did it. :)
@fullmetal7777 This conversation started around vh and rem - what are you looking for help with exactly? :p
JD Tadlock
@jdtdesigns
I always recommend starting with vanilla css, then moving to BS. If you don't know what BS is doing, you can kind of get the mindset that it's what css is.
Gulsvi
@gulsvi
And you did say it was a quick question lol
Top down, or bottom up. Different ways to learn things I guess
JD Tadlock
@jdtdesigns
I do recommend learning jQuery before vanilla though ;)
Gulsvi
@gulsvi
Free Code Camp goes Top down by teaching Bootstrap + jQuery I guess
Many would argue that just creates devs who don't know how to code though...
JD Tadlock
@jdtdesigns
It gives you an understanding in human words what javascript is doing
so when you jump into vanilla document.body.style.display = 'none'; makes a little sense ;)
Deepanshu Chug
@deepanshuchg
can somebody help me with some css? I want to display 4 boxes align as in microsoft's logo.
Andrew Hickman
@ahickman3
@SkyC0der yeah you can bet ill be using it from now on. but if i had used it i doubt i would have ever even realized how responsive design works. okay so the original question was regarding the text in front of the first background image (which isnt showing up on codepen at all, i guess just look at my website). When i try to position the text with top= #vh, and minimize the page, it acts like the top of the page goes beyond the browser and positions it with respect to that. But when i use bottom=#vh, it works as you would expect with mizmizzing (always stays #vh away from the bottom of the viewport). Now, i know that a good bit of the first background image goes above the page, so its hidden, but the viewport doesnt extend to that i thought?
Gulsvi
@gulsvi
@fullmetal7777 I didn't mean to scare you away, happy to help by the way :)
Andrew Hickman
@ahickman3
@SkyC0der was just writing a huge block a text haha your a great help. Any bit of information i get down helps me a ton
Gulsvi
@gulsvi
lol, okay
Andrew Hickman
@ahickman3
@SkyC0der Just trying to be a sponge-like as possible. I am one with the knowledge-sponge
Gulsvi
@gulsvi
I am one with the sponge, the sponge is with me
@fullmetal7777 To answer that vh question, I think it'll help to have less code. You have a lot of complicated things going on in your web page right now.
(Just to explain the concept and see the conflicts)
Like this, seems overly-complex:
.scuba-bg{
    background-image: url("http://res.cloudinary.com/dfnn1jyt7/image/upload/v1495832716/pic1_lulilj.jpg");
    background-position: center;           /*this will keep the background picture centered no matter the browser size*/
    background-size: cover;                /*scale background image so that it completely covers the background (may crop image)*/
    background-repeat: no-repeat; 
    background-attachment: fixed;          /*create parallax scrolling affect by fixing image to background block*/
    transform: translateY(-173px);         /*used to move picture up, margins wouldnt work because picture is fixed*/
    margin-bottom: -270px;                 /*crop bottom of picture*/
    height: 100%;                          /*will show the whole picture*/
    overflow: hidden;
/*    border-style: solid;
    border-color: yellow;        */    
}
Andrew Hickman
@ahickman3
@SkyC0der haha exactly, this guy gets it. See, bottom = 60vh positions it 60% away from the bottom, as id expect. But top = 60vh positions it like 20% away from the top, as i wouldnt expect lol thought the whole point of vh was that is positions with respect to the point on the page where its currently and #vh away from wherever.
Its actually a lot less messy from the night before lol i went through everything and tried to understand the logic and took out a bunch of filler. But yeah, the image stuff gets messy
Gulsvi
@gulsvi
@fullmetal7777 I think this is because of the transform you're doing
I mean, if you get a single picture, and the only CSS you apply to it is your top/bottom settings, it will work as expected
Andrew Hickman
@ahickman3
@SkyC0der its the only way i could get the image to bump up :/ i wanted to image to be perfect. I wanted it to be centered. even as i was minimizing the page. Also, i wanted it to be bumped up a little and i wanted it to be fixed to create a parallax scrolling effect
Gulsvi
@gulsvi
As soon as you start transforming, relative/absolute positioning things, using negative margins or big margins, you're taking everything out of the normal flow of the page.
Andrew Hickman
@ahickman3
@SkyC0der so it goes from a normal X+1 function to x^2-y^3+root(459) bascially lol
Gulsvi
@gulsvi
Exactly lol
Andrew Hickman
@ahickman3
@SkyC0der man, web dev is tricky lol
Gulsvi
@gulsvi
For responsive design, you're much better off using media queries - different sized images and different image placement depending on the screen size rather than a one-size-fits-all approach
Andrew Hickman
@ahickman3
@SkyC0der so if i absolutely have to get some weird code going on for an object, i just have to deal with it and work around it basically? The code for that image is as condensed as possible, and i tried everything to get it all to work together and thats what i came up with.
@SkyC0der Actually, mediaquery is what im getting into now. My first task was the get the text on the first background image ("Mark Hickman") so scale using mediaquery. Then i started looking at the vh and all that and things got off track
Gulsvi
@gulsvi
@fullmetal7777 Play around with media queries some more - very important for responsive design. If you study the way bootstrap does it, you'll see they have it everywhere.
Flexbox ends up relieving us from the need for that to an extent, but for background image placement, font size adjustment, etc... media queries are really the way to go
image.png
image.png
Andrew Hickman
@ahickman3
@SkyC0der which is exactly what i want to get into. Im going to try to get this site mobile-ready (hpoefully its not an impossible task at this point), add one more section, and call it quits for that. One question, i red a couple people say start from mobile and work your way up, but wouldnt having your website design done and then working on condensing it be easier? sounds like the way to go for me
@fullmetal7777 ahaha i dont even drink coffee, but if i get one of those mugs for my birthday, i might have to pick up a new habbit
Gulsvi
@gulsvi
@fullmetal7777 I've only been doing this for a few months and I haven't designed any full sites yet. My guess is that it's easier to start small and scale up.
"Mobile First" is something I see a lot
Andrew Hickman
@ahickman3
@SkyC0der oh damn, I didnt realize that. The idea of being as knowledgeable as SkyC0der in a few months, now ive got something to look forward to :D
Gulsvi
@gulsvi
Before you think about the mobile version of your page, you need good content though :) so it's really, content first, then mobile, then desktop
Thanks for the compliment :)
kbernie
@kbernie
Hello! I started to learn front end, when you work on back-end usually you have a requirements.txt file with the things you use; is there something similar convention for front end? Like now I'm trying out Bootstrap framework and Font Awesome toolkit and I want to keep track of technologies I use
Gulsvi
@gulsvi
You can learn a lot here in these chat rooms to be honest - different problems to solve nearly every day
Ejikemeuwa Eric Nnanna
@melete90
Hi guys, <div class="jumbotron"></div> doesn't work on my system. please what do I do?
Gulsvi
@gulsvi
@melete90 How have you set up bootstrap?
Andrew Hickman
@ahickman3
@SkyC0der yeah screw that, im not even messing with responsive design on this site, im so fed up with it haha but the next one, thats where its at.
JD Tadlock
@jdtdesigns
@fullmetal7777 Once you learn Sass, responsive design will be much less of a pain. :D