Swapping out a button

I tried searching for a solution to my problem but I couldn't find it because of my limited English proficiency. Therefore, I apologize if my question has already been answered.

https://i.sstatic.net/XhQBM.jpg

I would like to place my button in the location shown in the image. If possible, I prefer to achieve this using 'flex', but it is not mandatory.

Below is the code snippet that I have written:

*{
        padding:0;
        margin:0;
        box-sizing: border-box;
    }
    
    body{
        background-image: url('img/bg.png');
        font-family: 'Roboto', 'sans-serif';
    }
    
    a{
        text-decoration: none;
    }
    
    ul{
        list-style: none;
    }
    
    .container{
        padding-left:2rem;
        padding-right:2rem;
    }
    
    .container-deep{
        padding-left:8rem;
        padding-right:8rem;
    }
    
    /*about-me start*/
    
    .about-me .card{
        background:white;
        box-shadow:2px 2px 15px rgba(0,0,0,0.4);
        padding:4rem;
        display:flex;
        border-radius:10px;
    }
    
    .about-me .card-info{
        margin-left:5rem;
        display:flex;
        flex-direction: column;
    }
    
    .about-me .card .card-info h3{
        margin-top:.3rem;
        margin-bottom:1rem;
        font-size:.8rem;
        font-weight: bold;
    }
    
    .about-me .card...

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Emir">
        <meta name="keywords" content="full, stack, web, development">
        <meta name="description" content="Full Stack Web Development">
        <title>Full-Stack Web Site</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>
    <body>
        <section>
            <div class="about-me container">
                <div class="card">
                    <div class="card-image">
                        <img src="https://images.pexels.com/photos/2941570/pexels-photo-2941570.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
                    </div>
                    <div class="card-info">
                        <h1>About Me</h...

htmlcssbuttonresponsive

Answer №1

Employing a custom position:relative|absolute to address the issue at hand. Include the following snippet in your code:

//Ensure button "Visit My Blog"
a{
    position: absolute;
    bottom: 0;
    right: 0;
}

//Adjust content placement
div.card-info{
    position: relative;
}

Answer №2

To use flex, you need to implement a column layout and distribute child containers with space between them like this:

#container {
    display: flex;
    flex-direction: column;
    height: 45vh;
    width: 40vw;
    justify-content: space-between;
    border-style: solid;
    border-width: 2px;
    border-color: blue;
}

#button {
    border-style: solid;
    border-width: 2px;
    border-color: red;
    width: 10vw;
}
<html>
  <body>
  
    <div id="container">
    
      <div id="text">This is the about me text</div>
      <div id="button">this is the button</div>
      
    </div>
  </body>
</html>

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

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

htmlcssxhtml

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...

javascripthtmlcssspring-boot

The background size does not adjust to the size of the viewport

I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...

javascripthtmlcssthree.js

Positioning a box at the bottom rather than at the top

I am on the lookout for a solution to shift/arrange divs to the bottom instead of the top. For example, when attempting to delete some of the divs with the "box" class in this code snippet: Current code: #hol ...

htmlcss

Unable to set focus on a disabled button programmatically, issue persists

$(function () { $('#save').click(function() { $('#save').attr('disabled', 'disabled'); console.log($(document.activeElement).attr('id')); }); $('#test').focus(); co ...

jqueryhtmlbutton

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. https://i.sstatic.net/BQok4.png However, instead of the circle used in that picture, I want to use a different CSS Image like the one ...

csshtml-lists

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

chosen problem concerning jquery

My objective is to transfer li elements from one container to another container when the user clicks on the li span. I have a choices container and a choices display, so when a user clicks on the li span with the id of "add" in the first container, the r ...

jqueryhtmlcssevents

Unable to horizontally center ul element within Materialize navigation content

Struggling to center nav-content by using the center option Hoping for it to have this appearance. Unfortunately, applying it directly to the ul attribute doesn't yield desired results. Instead, it ends up looking like this. This is the code snipp ...

htmlcssbootstrap-4materializenav

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

javascriptcssangular

Retrieving information from a JSON file and dynamically displaying it on an HTML page using JavaScript

I've been working on pulling data from a JSON file to display on my website. Following this helpful guide at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON, but unfortunately, I'm facing an issue where nothing is showing ...

javascriptjqueryhtmlarraysjson

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

htmlcssreactjsoverlay

Developing an Easy-to-Use PDF Popup Interface

I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...

javascripthtmlcsssimplemodal

List that spans the entire width of the browser, with text limited to a maximum width

I've encountered an issue with a full-width list in my browser. It has a background color that changes when hovered over. However, I want the text within each li element to have left-aligned alignment, a maximum width, and equal left and right margins ...

htmlcss

Guide on adding animation to an image in Bootstrap when hovering with the mouse

Is there a way to add animation to an image on my website when hovering over it without using CSS? Are there any specific bootstrap classes that allow for direct animations on elements? ...

cssbootstrap-4css-animationsbootstrap-5

The icons from MaterializeCSS are not displaying correctly on the navbar within an Angular 7 project

Having an issue implementing MaterializeCSS Icons on the navbar. The arrow-drop_down icon is not displaying correctly, showing only text instead. Oddly enough, the icons render properly on other pages except for the app.component.html file. I attempted to ...

javascripthtmlcssmaterializeangular7

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

css

Exploring Material-UI: Leveraging makeStyles and CSS-In-JS for customizing library component styles

I'm currently utilizing Material-UI to construct a form using makeStyles and CSS-In-JS for styling purposes. I have a form component from the Material-UI library that I want to style according to my needs. My main focus is on how to address classes or ...

cssreactjsmaterial-uireact-hookscss-in-js

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

Problem with structuring a Html5 web page

Recently, I created a web page using HTML5. Check out the code below: <header> <img src="img/logo.png" alt="logo"> <hr class="hr-style"> <h1>The Articles</h1> <nav> <ul> <li><a href="#" ...

csshtml