by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 20:09
    @krisb1220 banned @Gastony
  • May 14 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 22:38
    @bjorno43 banned @real-action
  • Feb 01 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 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
Gulsvi
@gulsvi
@fullmetal7777 And I put your <script> at the very bottom of the HTML panel
@PipsChips Everything must use HTTPS now in codepen - your HTTPS proxy is blocked because it's ultimately going through a HTTP endpoint.
PipsChips
@PipsChips
I've changed the http-image with a htttps-animation, and tried to get json using https://crossorigin.me/ as an url's prefix
Andrew Hickman
@ahickman3
@SkyC0der what i would set the display to flex and use margin to move the div objects?
Gulsvi
@gulsvi
Mixed Content: The page at 'https://s.codepen.io/PipsChips/pen/XpYvdm?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?......'. This request has been blocked; the content must be served over HTTPS.
@fullmetal7777 You would use flexbox justify-content I believe: https://css-tricks.com/almanac/properties/j/justify-content/
@PipsChips The only fix for your weather app is to host it on a different server or use a different Weather API that supports HTTPS for free (like Dark Sky)
Andrew Hickman
@ahickman3
@SkyC0der okie doke, i fixed that, lemme re-upload my stuff, one sec.
PipsChips
@PipsChips
@SkyC0der
ok, thnx. gonna try that site
CamperBot
@camperbot
pipschips sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1576 | @skyc0der |http://www.freecodecamp.com/skyc0der
JD Tadlock
@jdtdesigns
Here's some global stats for browser usage. Unless your site is directed towards an older clientele, there's no reason to support ie 10 and below. IE11 supports flexbox with prefixes. http://gs.statcounter.com/
Gulsvi
@gulsvi
@PipsChips Good luck :+1: this is a pain for many people right now :(
Andrew Hickman
@ahickman3
@SkyC0der https://codepen.io/fullmetal7777/pen/bWzegK things are atleast showing up now, but still trash view lol http://andrewsawesomesite.com/ is what it should look like
@SkyC0der i think its not showing that first background images. I had a lot of trouble getting images to show up on codepen until i eventually just gave up on it
@SkyC0der i used like 4 different image hosting website and still nothing
Gulsvi
@gulsvi
@fullmetal7777 with class names like this <li class="nav-links">, are you supposed to have bootstrap in your project? Or just using the same class names?
Andrew Hickman
@ahickman3
@SkyC0der no bootstrap, wanted to do this all without it so i could learn as much as possible. Id say worth it so far though, i have learned a lot. Want to try to get the responsive design solo on the first shot
@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.