Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hyperlinks click radius is bigger than the actual text

Tags:

html

css

i have a website with some links on them, and the links are clickable for longer than the actual link.

enter image description here

As seen on the picture I am able to click the links way out to the right.

I tried searching for answers, but i didnt really know how to formulate my answer, or just no answer seem to be there.

So is there a way that i can make the links to be the exact size of the text?

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  font-family: 'Work Sans';
  background-color: white;
  /* this breaks position sticky in Firefox */
  /* overflow-x: hidden; */
}
header {
  grid-column: 1 / 3;
  background: #5D5C61;
  background-image: url("../Assets/Images/headerImage.jpg");
  color: white;
  padding: 4rem;
  text-align: center;
  font-family: 'Chivo';
  font-size: 22px;
}

header a {
    padding-right: 20px;
}

nav {
  white-space: nowrap;
  background: #252E39;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Only stick if you can fit */
@media (min-height: 300px) {
  nav ul {
    position: sticky;
    top: 0;
  }
}

nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

nav ul li a.current {
  background: #51656E;
}

main {
    padding-top: -30px;
}

section {
  padding: 2rem;
  margin: 0 0 2rem 0;
  
}

#section-1 {
    background-color: white;
}

footer {
  grid-column: 1 / 3;
  background: #37474F;
  padding: 5rem 1rem;
}

a {
    color: black;
    text-decoration: none;
}

main a {
    display: block;
    padding-bottom: 20px;
}

a:hover {
    color: #6B7B83;
    text-decoration: underline;
}

a:active {
    color: #6B7B83;
}

.socialIcon {
    height: 20px;
    width: 20px;
}

#socialMedia {
    text-align: center;
}



.CALink:hover {
    color: #202F36;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    font-family: 'Alegreya Sans', sans-serif;
}

.control-group {
  display: inline-block;
  vertical-align: top;
  background: #FFFFFF;
  text-align: left;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 65%;
  height: 100%;
  margin: 1%;
  align-items: center;
}
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
        <link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
        <link rel="icon" href="Assets/Images/faviconTTT.png"/>
        <title>Silverflame</title>
    </head>
    <body>

        <header>
            <div id="socialMedia">
                <a href=""><img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" /></a>
                <img class="socialIcon" src="Assets/Images/twitterSVG.svg"/>
            </div>

            <h1>SilverFlame</h1>
            <a target="headerLink" href="https://www..dk/">Home</a>
            <a target="headerLink" href="https://www..dk/CA.html">CA</a>  
            <a target="headerLink" href="">About</a>
        </header>

        <nav>
            <ul>
                <li><a href="#section-1">Studypoint exersice 3</a></li>
                <li><a href="#section-2">Maven</a></li>
                <li><a href="#section-3">Network and HTTP</a></li>
                <li><a href="#section-4">JS and CA1</a></li>
                <li><a href="#section-5">MODUL 2</a></li>
                <li><a href="#section-5">Section 5</a></li>
                <li><a href="#section-6">Section 6</a></li>
                <li><a href="#section-7">Section 7</a></li>
                <li><a href="#section-8">Section 8</a></li>
                <li><a href="#section-9">Section 9</a></li>
            </ul>
        </nav>

        <main>
            
            <section id="section-1">
                <div class="container">
                    <div clasS="control-group">
                        <h1>Study Point Exercise 3 - JPA, JPQL and Testing </h1>
                        <h3>Part 1</h3>
                        <a href="https://github.com///tree/master">Exercise 
                        - JPA Entity Mappings - 1</a>
                        <a href="https://github.com///tree/master">Exercise 
                        - Java Persistence - Querying - 3</a>
                        <h3>Part 2</h3>     
                        <a href="#">Studypoint part two</a>
                        <h3>Part 3</h3>
                        <a href="https://github.com//ExamPrepOneJPQL">Exam Preparation 
                        Exercise on relations and queries</a>
                        <a href="https://github.com//ExamPrepTwoJPQL">Exam Preparation   
                        Exercise on JPQL</a>
                        <a href="#">Object Relational Mapping and Inheritance</a>
                    </div>
                </div>
            </section>

        </main>
        </body>
like image 765
dumbprogrammer Avatar asked Mar 05 '23 10:03

dumbprogrammer


1 Answers

It's because you have those links set to display: block - you should set them to be display: inline or display: inline-block. Block level elements will automatically fill 100% of the available space horizontally.

See https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b

Edit: As someone commented, setting the links to be inline will cause them to appear on the same line. Put those links inside of some kind of wrapper (like a list <ul> with <li>s) and then the links inside of each list item.

like image 63
Charlie Stanard Avatar answered Mar 12 '23 19:03

Charlie Stanard