Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    David Castner
    @davidjcastner
    @lantech19446 you're referring to the three images at the bottom of the page correct?
    Jonathan Herman
    @lantech19446
    yes, they all function as buttons to different pages
    David Castner
    @davidjcastner
    and what is your end goal with them, to maintain the margin spacing on all views?
    Jonathan Herman
    @lantech19446
    yes, I like the way I have them spaced but I know there's more appropriate ways to do it I had a hell of a time just getting them into a row like that they all wanted to go top to bottom. On my profile page I'm having an issue getting my picture next to the text things like that and I'm finding it difficult to find the answers for it
    David Castner
    @davidjcastner
    What I would recommend is using a flexbox container around them which @Lilyheart mention and then setting the margin to a pixel value (px) that you like. Here is a nice page that explains how to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Alex H.
    @Alexander-Huh
    do I need to format my CSS differently if i write it in the CSS file as opposed to the HTML file? Trying to change the color of text with an id
    David Castner
    @davidjcastner
    @lantech19446 I can put together an example, or let me know if you have question looking through that
    Lily Romano
    @Lilyheart
    same way
    .className { }
    Jonathan Herman
    @lantech19446
    I guess my big question is does this scale between monitor sizes?
    Alex H.
    @Alexander-Huh
    but if I'm using an id I a # right?
    instead of a period
    Lily Romano
    @Lilyheart
    Right! Sorry. Correct.
    OCTOTHORPE!!!
    If anyone else wants to stream their screen, I'm more than willing to add you!
    David Castner
    @davidjcastner
    @lantech19446 yes, as long as you the buttons you are wrapping have a static pixel width small enough for all of them to fit in the page, or you can give the buttons you are wrapping a percentage width (%)
    Lily Romano
    @Lilyheart
    After I figure out how >.>
    David Castner
    @davidjcastner
    @lantech19446 otherwise you will probably have to use media queries
    Jonathan Herman
    @lantech19446
    ok cool, trying it now doesn't look too complicated. I can apply this class to a div or do I need to invoke it in each image?
    David Castner
    @davidjcastner
    flexbox works by attaching specific styling to both the container the element you want inside (which can be a div) and the elements inside the flexbox (which can be any block element I believe)
    Jonathan Herman
    @lantech19446
    hmm not sure this is going to work the way I made the buttons then
    David Castner
    @davidjcastner

    You can put your buttons in a container with the property of

    .class { display: inline-block; }

    inline block will make the elements have the minimal width around your button and also be a block element at the same time, or you can give your buttons the inline-block property as well

    Jonathan Herman
    @lantech19446
    that doesn't seem to be making a difference :(
    David Castner
    @davidjcastner
    @lantech19446 throwing together an example
    Jonathan Herman
    @lantech19446
    ok
    David Castner
    @davidjcastner
    Alright here is a forked version of your page with flexbox, I didn't do anything with text wrapping, but let me know if you need help with that http://codepen.io/davidjcastner/pen/beNBYw
    @lantech19446 I inserted lots of comments to help explain what the properties are doing, let me know if you need more explanation
    Jonathan Herman
    @lantech19446
    ooo ok so I actually have to have it in 2 different divs
    David Castner
    @davidjcastner

    @lantech19446 yes because your buttons consisted of two elements an image and text, if it was only the images, you could do it with

    .myImageButton { display: block; } /* not inline-block that was my fault */

    inline-block is for alignment in a row without a flexbox, forgot that

    Jonathan Herman
    @lantech19446
    interesting I'm building the code you put into mine step by step so I can see how each things effects them but it's ignoring my flex-direction
    David Castner
    @davidjcastner
    @lantech19446 hmm check if you had added any more css from the time that I forked it (the css above Flex Styling), also the minimal amount of properties required to get it to work are
    .container { display: flex; flex-direction:row; }
    .flex-item { flex-basis: 33%; }
    Jonathan Herman
    @lantech19446
    oooo I think I founbd it
    no I missed that you called the class other places also
    yep working great now, thank you
    David Castner
    @davidjcastner
    @lantech19446 my pleasure, I'm here to help :smile:
    Lily Romano
    @Lilyheart
    How goes Batman @Alexander-Huh ?
    @dbutler22 Enjoying the HTML so far?
    David Castner
    @davidjcastner
    Signing off for the day, but if anyone has any questions just ask them in here and we'll be happy to help
    Lily Romano
    @Lilyheart
    Have a good night @davidjcastner !
    Jonathan Herman
    @lantech19446
    Thanks again Dave
    Lily Romano
    @Lilyheart
    Whew. That challenge... was much. And I'm sure there was a better way, but I've only begun my math studies.
    Robert Maylie
    @rmaylie9560
    What site lil?
    Lily Romano
    @Lilyheart
    Under Intermediate Algorithm Scripting -> Smallest Common Multiple
    It's streaming if you are on chat.montcode.com. I had to take a break after that one.
    Robert Maylie
    @rmaylie9560
    HahahahašŸ˜‚ That bad huh?
    Jonathan Herman
    @lantech19446
    so happy you guys were here tonight, learning the flexbox stuff is helping me with the 2nd project too
    Robert Maylie
    @rmaylie9560
    And your super smart. That kind of question may end my hobby as a coder. Not that I would give up, but I was spend the remainder of my time trying to figure out the answer
    Alex H.
    @Alexander-Huh
    @Lilyheart batman is coming along ok
    Lily Romano
    @Lilyheart
    @rmaylie9560 the good news is there is plenty of help out there. Read-Search-Ask!
    Robert Maylie
    @rmaylie9560
    Not my style...