Html Question posted in
Some basic documentation can be found here.

Html – Unclickable text and broken links

I am trying to build a website which is built to just display text and links and while inputting text all of a sudden 2 of the blocks of text suddenly started acting as if there was a wall and auto generated another space below them. The link in the text also became unclickable, and the text cannot be highlighted, and will highlight another line. If I keep moving the cursor to the right the text will then rubberband and highlight all of the text above as well. One of the links can also only be clicked in a certain part. Here is the code and the website

https://supporting-souls.netlify.app

HTML

CSS

I tried resetting margins and using inline CSS but nothing seemed to fix it. I removed a block of text below it and suddenly the link started working. Currently the link that reads "How to start investing" is only clickable in some places and if I add the text below it becomes unclickable.

Tags:

2

Answers


  1. 0

    I believe that the source of the problems is the method used to format the page layout. Upon inspecting your website using Chrome Devtools, three things stood out:

    1. The margins of most page elements were set using %. For example, <div class="mission" ...> has margin-top: 45%. Beware of doing so, as % is determined relative to the parent element, body in your case (which is the whole page!). This is why there are huge orange blocks shown in Devtools, and why text highlighting doesn’t work properly. You can read more about this on MDN. I suggest leaving the margins as the default, and using paddings or relative positioning to space your content out.
    2. This problem is especially stark with the article and p elements you used. I suggest removing their margin-top property.
    3. You included the background image as a regular image. This can cause problems with the way other page elements are positioned. You should consider placing it as a background image. You can learn how to do so at W3Schools.

    Admittedly, removing all the top margins makes all the text clump together, and makes some disappear. I suggest using a grid layout, such as the one provided by Bootstrap. I personally found it very helpful.

    Login or Signup to reply.
  2. 0

    Perhaps start by checking your browser dev tools. Its not just that div that is overlapping.. the entire web page text overlaps at different screen sizes.
    Just put text in standard "p" Tags with H1 or H3,4 tags accordingly and wrap the text in "<section tags" .
    use Bootstrap for your web page. It will help you with the responsiveness.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search