HTML responsive web design help please

Code with C | Programming: Projects & Source Codes Forums HTML/CSS HTML responsive web design help please

This topic contains 3 replies, has 1 voice, and was last updated by  CWC 4 months, 2 weeks ago.

  • Author
    Posts
  • #12535

    CWC
    Keymaster

    First time making a responsive web design and all went well except when I got to last page, contact us. I’m using a third party comment box and I got it to work and looks perfect in full web browser view but in mobile responsive view, the comment box overlaps against the footer. I don’t know why. Could someone please help.

    HTML file code

    Stylesheet

    Contact form stylesheet

  • #12536

    CWC
    Keymaster

    The only thing i noticed is that your form is positioned absolute, if you can avoid that and get right positions otherwise it might help already for the things to fall into their right space.

  • #12537

    CWC
    Keymaster

    idk the exact code, but responsive web site is done in Java and CSS. You set the java to change the CSS at a certain width, like for widescreen, laptop, tablet, phone etc.

    he best thing to do would be to open up the developer tools in a browser and change to device mode to see what rules are being applied for responsive and difference mobile devices. You can change the element styles on the fly to see where the issue is. You may need to create a specific style for your page/form on mobile. Looks like you have the mobile styles already. They may just need adjusting or the targets need to modified.

    https://developer.chrome.com/devtools/docs/device-mode

    you have problems with responsive layout.

    Do you see any problem with that? You should. width: 450px is way bigger of your standard @media query.

    You should set a new width in the media query, as the 88% just confuse the heck of the DOM.
    You think the dom think like a human, but it does not.

    It does not calculate the 88% out of the form, but the screen
    You THINK it resize the form up the 88% capacity, but it does not. It fix the width at 88% then it fault because the width is still 450px

    This means, just change the width in the media query, and for what I see, revise the javascript. If you did not do it yourself, learn javascript and you can do more than the basic version

    I stopped here, there may be other bugs
    EDIT: also, set float to none and position to block in the media query
    Re-learn CSS if you did. w3school is great for that.

  • #12538

    CWC
    Keymaster

    Remove "position: absolute;" from "#form-div".

You must be logged in to reply to this topic.