In HTML, the size and position of an <a> element cannot be altered or adjusted

I am having trouble with an anchor element that is contained within a div. No matter what I try, I cannot resize or move it up or down without it covering its sibling element. I have attempted using transform-translate and margin properties, but to no avail.

https://i.sstatic.net/FejF6.png

Snippet of HTML code: 

<div class="medio-item">
     <img src="../assets/mail.svg" class="icon" alt="Email">
     <div class="medio-item-text">
          <h3>Contact Us:</h3>
          <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="721a1d1e13141701061b04131e32061d070001141701061b04131e5c111d1f">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2720232e292a3c3b26392e230f3b203a3d3c292a3c3b26392e23612c2022">[email protected]</a> </a>
     </div>
</div>

Snippet of CSS code:

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

.medium-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 utilized here is SCSS format.

htmlcsssassscss-lint

Answer №1

The issue may be arising from the use of display flex for medio-item. Try adding flex-direction: column and see if that resolves it:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 8 UI not displaying mockAPI data as expected

My mockAPI is successfully fetching the data, but the json response structure is quite complex. It looks something like this: [ { "planList": [ // plan details here ] } ] Everything in the UI is displaying correctly, except ...

htmlangularapifrontendangular8

Using the jquery stop() function will halt any ongoing hover effects from being applied

I am currently experiencing a problem with the code found on http://jsfiddle.net/eSbps/. This specific code pertains to a menu system that reveals second levels when hovering over the top levels, using slideDown('slow'). To prevent queuing effe ...

jqueryhtmlcss

What is the best way to include spacing among my Bootstrap 5 navigation components?

Looking for advice on creating space between each nav-item in a bootstrap 5 navigation bar while maintaining a clean design for phone mode. Here's the code snippet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

htmlcssbootstrap-5

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

javascriptjsonhtml

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

cssfrontendbootstrap-5

Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...

htmlcssflexbox

What is the best way to position the bottom block?

I'm trying to create a template that looks like the image below: https://i.sstatic.net/m6q0s.png I managed to position the top square correctly, but I'm having trouble aligning the bottom one - I can't seem to move it to the bottom left co ...

htmlcss

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell. Below is my current progr ...

htmlcss

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

javascriptphpjqueryhtmlangularjs

Instructions on displaying the filename as the input for width and height dimensions

Running into an issue with Bootstrap 4 - whenever I try to upload a file with a long name, it ends up overflowing beyond the input field. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

phpjqueryhtmlcss

What is causing the div to not update until the for loop is completed?

I have an HTML page where I am trying to update a div while a for loop is running. However, the div does not update until after the loop finishes. Why is this happening? <!DOCTYPE html> <html> <body> ...

htmlloopsdisplay

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

htmlcsshtml-tablemultiple-columns

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

htmlcsshtml-lists

Tips for stacking objects vertically in mobile or tablet view using HTML and CSS

I have been diligently working on a project using a fiddle, and everything appears to be running smoothly in desktop view. The functionality is such that upon clicking any two product items (with one remaining selected by default), a detailed description ...

javascriptjqueryhtmlcssmedia-queries

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Why is it so difficult to hide a checkbox that says "Remember Me" on my membership site login form? The HTML code snippet causing the issue: <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</la ...

css

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

<div contenteditable="true">This text is <b>Bold</b> not <i>Italic</i> right?</div> For instance, if the text appears in a bold format, but not italic and the user selects it, how can I determine the exact position ...

javascriptjqueryhtmlcss

The icons from Font Awesome are not displaying properly in Angular version 15

I have been searching for new information to help solve the error I am experiencing but haven't found any useful results. Here is my issue: I am working on a project in Angular 15.1.0 and want to incorporate some Font Awesome icons. To do this, I foll ...

cssangularfont-awesome

Creating a triangular shape using a div element

Struggling to create a triangular div? I used the border trick to make it, but now there's a transparent line slicing through the triangle like a dividing line. I've attempted various solutions to make that line solid, but nothing seems to be wor ...

htmlcsstwitter-bootstrap-3