1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Text header not aligned properly

Discussion in 'HTML & Website Design' started by muchochiz, Mar 22, 2017.

  1. #1
    Hey I am having this challenge with a landing page I am working on, so far everything seems to be going smooth except the problem of aligning a text over the drop down list form. I have tried all I can but this seems very very problematic. Here's the screenshot below.
    I am not sure if I should upload the entire website here or just snippets. I don't know if the problem is from the css or bootstrap. Would really appreciate some response.
    SEMrush
     

    Attached Files:

    muchochiz, Mar 22, 2017 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #2
    There are plenty of things wrong with that design (but I'm guessing you might not have power to do anything about the missing label-elements for the form-tags and such). Another problem is that you're using Bootstrap, which is ridiculous for such a page (or in general, but lets not nitpick).

    This is fairly easy to manage if you use proper HTML and for instance use flex-box.
    Here's a quick example - it's not a 100% aligned, but most people won't note the difference (nor is it styled completely the same, but close enough) - and it uses labels, which every form should use - placeholders are NOT labels. https://jsfiddle.net/2bvqe2mo/
     
    PoPSiCLe, Mar 22, 2017 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,050
    Likes Received:
    1,674
    Best Answers:
    236
    Trophy Points:
    515
    #3
    I would say the problem is the HTML, CSS, AND the idioitic mouth-breathing nube-predating halfwit BULL known as bootcrap.

    See, you have a MAJOR problem with the design -- and that's one of "false simplicity' and that "placeholder is not a label"; basically your HTML alone is telling users to wholesale go **** themselves.

    False simplicity: https://baymard.com/blog/false-simplicity

    Placeholder is not a label: http://lmgtfy.com/?q=Placeholder+is+not+a+label

    Why you should kick bootcrap to the curb: http://www.cutcodedown.com/article/HTML_CSS_and_JS_frameworks

    Without even seeing the code, conceptually your form is inaccessible trash meaning the markup needs to be pitched in the bin and started over.

    Though even with the mind-numbingly dumbass asshat rubbish that is bootcrap, you haven't shown us any markup or CSS. Really the BEST approach would be if you could put what you have 'live' somewhere so we can see the whole thing actually working... short of that, the full markup and full CSS for the page is a close second. Snippets are rarely useful as you never quite get the full picture or how broken the overall page might be.

    Also that light grey text is banging right up against the legibility minimums for contrast over the white. Might look pretty, but is also telling users with accessibility needs to stick it up their...
     
    deathshadow, Mar 23, 2017 IP
  4. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    Yeah, its all a mess and I don't really know if its the theme that has the problem or maybe I made too many modifications on the theme (without really knowing what I was actually doing)
     
    muchochiz, Mar 24, 2017 IP
  5. johnhammer96

    johnhammer96 Peon

    Messages:
    4
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    3
    #5
    Hey, tell me how you really feel. I mean, don't beat around the bush :) (or should I say don't beat around the bootstrap!)
     
    johnhammer96, Apr 7, 2017 IP
    qwikad.com likes this.