Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design First Bootstrap Site – Code Critique?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #148517
    StephBertha
    Participant

    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?

    #148528
    Paulie_D
    Member

    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

    #148652
    jurotek
    Participant

    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.

    #148708
    Ed
    Participant

    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.

    #149347
    StephBertha
    Participant

    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.

    #149348
    StephBertha
    Participant

    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.

    #149419
    srikarg
    Participant

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

    #149528
    jurotek
    Participant

    @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)
  • The forum ‘Design’ is closed to new topics and replies.