Grow your CSS skills. Land your dream job.

First Bootstrap Site – Code Critique?

  • # August 29, 2013 at 10:31 am

    Hi there,

    I wanted to check in with some fellow Bootstrappers and see if I can improve my code a bit more. I feel like I’m not doing something right because when my site is resized, there’s a certain break point that looks funny.

    http://stephaniebertha.com/indev/sti/

    FYI: When the site goes live, the CSS and JS will be compiled into one file. Right now, it’s split so I can update the design easily.

    Thoughts?

    # August 29, 2013 at 12:31 pm

    I think it’s here at line 212 of your custom.css

    #home-intro-image img {
    margin: 0;
    padding: 0;
    }
    

    I think that needs to be

    #home-intro-image img {
    margin: 0 auto;
    padding: 0;
    }
    

    to center the image.

    You may have a problem with that absolutely positioned “learn more” element though. You might want to think about wrapping that img and element in a centered div of their own so everything works out right.

    http://codepen.io/Paulie-D/pen/KuhEa

    # August 31, 2013 at 6:57 am

    Remove left margin on: #primary-content ul

    BTW, IMO, the use of accordion for Services and Samples is not a good choice for UX in your case. Why are you forcing user to click over dozen of times to view what company has to offer? Wouldn’t this be much nicer to present that info in a nice grid? There’s a place for accordion under some circumstances where it is appropriate based on the info under category which is relevant to either user location, specific needs, etc. In your case I see it as a annoyance. There’s lot of hipster things we can do now days but, just because we can, doesn’t mean we always should.

    Ed
    # September 1, 2013 at 7:54 am

    Congrats on making something with Bootstrap that doesn’t look like it was made with Bootstrap!

    Why does #intro-home-image a have a red border on the bottom of it? It doesn’t fit with the blue & white colour scheme. On that same element, why isn’t the purple background translucent & the font different (basically, why does it differ to the way that same design element appears on the grid of pictures just below)?

    As for the breakpoint issue, it’s because the image doesn’t quite fill it’s container, it’s about 47px too thin. If you don’t have a higher resolution photo, Paulie_D’s CodePen solution will fix it.

    # September 7, 2013 at 11:18 am

    Hi Paulie:
    Thanks for that! Yeah, that’s something to think about. I’ll pass it along to the clients.

    Hi jurotek:
    Thanks, I removed the left margin. In regards to the accordion, you’re right. I had thought of pros for it, but have not thought of that con. Here’s to hopes the client chooses the new direction I gave them (without the accordion). Thanks for the fresh pair of eyes.

    Hi Ed:
    Thanks! I tried to make it not look template-ish, without going over the top to where I don’t know how to code it lol. I know how to code, but not bootstrap.

    In regards to the red border, I thought it could use a hint of red. I wanted to put little touches of that red around the site as to make it not look boring.

    You may want to take a look at the home page as it has been updated, then maybe some of the comments don’t apply anymore.

    # September 7, 2013 at 11:19 am

    A few more questions for you guys:

    • Since hover doesn’t work on mobile, do you use “focus” instead?

    • What are good breakpoints to use for media queries? I think that’s the part that feels messy, to me, in my code. I don’t have a standard set of breakpoints.

    # September 8, 2013 at 11:00 am

    @chriscoyier provides a very good set of media query breakpoints here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

    # September 9, 2013 at 12:27 pm

    @StephBertha Couple more things. You could remove those two slanted separators in navigation. It would look cleaner without them specially at 320 width. Another thing is to add display inline -block to

    .navbar li a {display:inline-block;}
    

    that way the Why STI? will not brake at 320 width but will move below Services and Samples..

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".