HTML a can't change size or be moved

Question

I have an anchor element, inside a div, and it can't be resized or moved up or down and when I add padding to it, it just covers his sibling element, I tried using trasnfrom-translate, margin, and nothing happened.

HTML-Code:

<div class="medio-item">
     <img src="../assets/mail.svg" class="icon" alt="Email">
     <div class="medio-item-text">
          <h3>Escribenos a:</h3>
          <a href="mailto:holafestival@toursfestival.com">holafestival@toursfestival.com </a>
     </div>
</div>

CSS-Code:

.contacto-medio {
    margin: 5rem 0;
    .contacto-medio-online {
        display: inline-block;
        width: 46rem;
        height: 42rem;
        background-color: #f87408cc;
        @include WidthAuto;
        .medio-item {
            display: flex;
        }
    }
}

.medio-item-text {
    color: white;
    h3 {
        font-size: 1.6rem;
        font-weight: 700;
    }
    a {
        color: black;
        background-color: white;
        border-radius: 5px;
        padding: 1rem;
        margin: 0;
    }
}

the CSS is SCSS

Please post full snippet, this is half data – user3337667 Mar 14 '20 at 16:25 — user3337667, Mar 14 '20 at 16:25

score 2 · Answer 1 · answered Mar 14 '20 at 16:25

2

I think the problem is because of the display flex for medio-item. add flex-direction: column and check the result:

.medio-item {
   display: flex;
   flex-direction: column;
}

answered Mar 14 '20 at 16:25

Shadi Farzankia

639
8
21

thank you, pal. It solved my problem – Jesús Bohorquez Mar 14 '20 at 17:28
If it worked for you please accept the answer and close it – Shadi Farzankia Mar 14 '20 at 20:36

HTML a can't change size or be moved

1 Answers1