Grow your CSS skills. Land your dream job.

Looking for any improvement in term of styling css

  • # April 18, 2013 at 3:07 am

    Just completed my pet project. So looking for honest critics, comments, advise & so on. Esp on CSS aspect.

    [Your text to link here...](http://www.mytravel22.com/kuala-lumpur-hotels.html “the webpage”)

    # April 18, 2013 at 3:49 am

    I think the background image is maybe a little to much. Fair play for trying a responsive design but it looks a bit like a full screen article instead of a website. I think it needs a bit more direction and focus as there doesn’t seem to be a theme.

    I wouldn’t have a mobile site link at the top of the page either, try using @media queries instead pal.

    # April 18, 2013 at 4:06 am

    The images for the slideshow look a bit too pixelated, and their difference in sizes make the text jump around which is distracting, to say the least.

    Overall, the layout is a bit distracting, there’s nothing to tell me what is what, so to speak. Maybe some borders or something else to divide up the boxes?

    The mass of text is far too wide, it’s kind of hard to focus on the lines, and there is no space for it to breathe.

    Mobile has the same problem with the slideshow (that is, in my opinion, one of the biggest priorities to fix), but is overall the more visually pleasant of the two. Why are the fonts different, and why not just base it off of the mobile – there’s not enough going on that you really need to have two different sites, and overall I think people prefer not to be deprived of information just because they’re on a smaller screen.

    I’d also do something with the links, they’re a bit too… standard. No, you don’t need to get too fancy with them, but at least put some thought into how they will fit into the rest of the design and colour scheme.

    My overall impression is that there isn’t enough attention paid to details. Divide up the content in a visually pleasing matter, settle on a font for the headers as well, preferrably one that matches the Arial/Arial Narrow you’re using for the paragraphs, move the font declaration up to the body so that there is a default font that cascades down to all elements… I think that’s the start of what I’m seeing, good luck and don’t hesitate to ask if you need more suggestions.

    # April 19, 2013 at 3:02 am

    Wow! Just when you thought your job was completed…….looks like it’s just begun. Zillions of thanks for the feedback.

    BinG – totally agreed with the ‘full screen kinda thing’. Still searching for a nice theme & working on the direction. I not disagreeing with the @media but i believe there’s still room for discussion though.

    Melindrea – Yep, the ‘text jumping’ solved, font standardize to Arial & border done. However one problem pops out. The website stop responding, i guest this is due to border.

    Any idea how to solve it???

    # April 19, 2013 at 3:47 am

    How do you mean, it’s stopped responding?

    If you’re talking about it not getting smaller, it’s because you’ve set the #Content and .container both to a width of 1100px. Maybe switch the width/max-width around, so that it’s width 100%, max-width 1100px?

    Wait… Why is the “your browsing choice” a list? And for the border, I actually more meant dividing up the main content, the social stuff and newsletter into more clearly defined “boxes”.

    # April 19, 2013 at 5:12 am

    ok it’s responsive again. Solved the width but stuck with height. If i set the height using % it will shrink vertically only. If take out the height it works but the text will start jumping again.

    Any advise?

    # April 19, 2013 at 6:19 am

    The easiest seems like it would be to make sure that all images in the slider are the same size.

    # April 21, 2013 at 11:22 pm

    Yep, problem solve & no more text jumping. Tks for the comments & advise! It definitely looks better now. Just need to add in the theme & a bit direction to finish it.

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".