What is the best way to accomplish this using HTML and CSS?

I am new to web development and currently working on creating my own portfolio website. I have designed a section at the bottom of my page that features an "About Me" box, with the remaining space dedicated to footer links and copyright information.

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

The current design looks like this. I am looking to add a background that starts from the middle of the about section and extends to the bottom of the page without any margins.

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>

#about {
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}[enter image description here](https://i.sstatic.net/dUTIz.png)
javascripthtmlcssuser-interfacebootstrap-4

Answer №1

As a solution, I decided to eliminate the use of margin-left and margin-right, and instead opted for padding. By setting both padding-right and padding-left to the same value, it functions similarly to margin but allows for background elements without any cutoff issues. Additionally, I included some padding-top as depicted in the image, and set padding-bottom to 100% which equates to the full height of the page.

Hopefully, this explanation clarifies things!

#about {
  /*  margin-left: 70px;
    margin-right: 5%;*/
    margin-bottom: 20%;
    margin-top: 80px;
    padding-right:50px;
    padding-left:50px;
    padding-top: 50px;
    padding-bottom:100%;
    background:blueviolet;
}

.abt-content {
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;

}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}
<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    
</div>
</section>

Answer №2

To create a unique background that spans from the middle of the page to the bottom without any margins, you can utilize absolute positioning in your CSS code. Below is an example of how you can adjust your styles:


#about {
    position: relative; /* Ensure relative positioning */
    margin-left: 70px;
    margin-right: 5%;
    margin-bottom: 20%;
    padding: 80px 0px;
}

.abt-content {
    position: absolute; /* Set absolute positioning */
    background-color: #232946;
    padding: 50px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for horizontal centering */
    width: 90%; /* Modify width based on design */
    bottom: 0; /* Align to the bottom */
    margin-bottom: 0; /* Remove bottom margin */
}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}

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

Several buttons sharing the same class name, however, only the first one is functional

As a newcomer to JavaScript, I am currently working on the front-end of a basic ecommerce page for a personal project. My query pertains to the uniformity of all items being displayed on the page, except for their names. When I click on the "buy" button f ...

javascripthtmlarrays

The AJAX functionality for managing filters in a Django ecommerce application does not seem to be functioning properly when trying to paste the URL into a new tab

Two days ago, I encountered a problem that I still haven't found a proper solution for. Any assistance on this matter would be greatly appreciated. Let me provide some context first: I have a Django-based e-commerce website and I am looking to render ...

javascriptpythondjangoajax

Sending a request for the second time may result in data duplication

To upload a file to the server, I use the following code snippet: var fd = new FormData(); fd.append('folder', 'html'); fd.append('permission', 0); fd.append("file", file, file.name); After selecting the file from an input f ...

javascriptajaxrequest

What is the process of extracting a utility function from a helper file on a node.js server?

I'm facing a challenge with my node/express server where I need to access a function from a helper file in my app.js. The function in the helper file looks like this: CC.CURRENT.unpack = function(value) { var valuesArray = value.split("~"); ...

javascriptnode.jsreactjsexpress

The carousel caption in Bootstrap 4 is not showing up on smaller screens

While experimenting with the Bootstrap 4 carousel example found at http://v3-beta.getbootstrap.com/components/#carousel, I encountered an issue where the carousel caption is not visible on mobile or small screens. Any assistance would be greatly apprecia ...

carouselcaptionbootstrap-4

The functionality of res.status().send() appears to be malfunctioning when used within a Promise

I am currently working on a code that involves checking authorization from two different API calls within a promise.all method. If any of the authorizations fail, I want to throw the respective res.send method as an error. However, I keep encountering an " ...

javascriptnode.jsexpresspromise

Creating a custom hook in React to manage dynamic refs

Creating an app that heavily utilizes animations has posed a challenge for me, especially when dealing with dynamic refs and custom hooks. One of my custom hooks adds a click event listener, manages an animation, and returns a ref: const usePageChange = ( ...

javascriptreactjsreact-hooksreact-ref

Is there a way to enable browsers to support line-breaks between inline elements without any spaces separating them?

In the case where I have a container with display: block and I need to dynamically populate it with elements styled as display: inline, such as <span> tags. Each of these elements should act as a "word", so when they reach the right edge of the paren ...

javascripthtmlcss

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

javascriptnode.jsangulartypescriptecmascript-6

Ways to create an inline effect for h3 and <hr> elements, or strategies for incorporating a horizontal line following a header

Is there a way to make the H3 and HR elements appear inline? In my design, I want a horizontal line to come immediately after the title without breaking onto the next line like it currently does. <div class="row"> <h3 class="col-md-4 col-sm ...

htmlcssbootstrap-4

How can I ensure that this footer is consistently centered across all screen resolutions?

I've managed to get my CSS looking just the way I want it on my 1366x768 laptop screen, with the element centered at the bottom of the page. However, when I switch to a larger screen, the footer moves to a different position higher up on the page. An ...

htmlcss

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

What is the best way to retrieve the result of a JavaScript function in an HTML form?

I'm currently developing a JavaScript app that involves selecting a random question from an array and combining it with a random object from another array. Here's a glimpse of how my app is structured: Array.prototype.random = function (length) ...

javascripthtmlarraysdomrandom

Updating array content based on property criteria

I've been tackling a project in Angular where I have two arrays set up like this: array1 = [ { Name: "Jack", Id: "1", Location: "UK" }, { Name: "Rose", Id: "2", Location: ...

javascriptangulartypescriptangular8

Determine if the dropdown selection is blank within a Django template

<div class="form-group col-md-6"> <div class="form-group"> <label for="customer_id" class="text-white">Customer</label> <select class="form-control bg-dark te ...

javascriptpythonhtmldjango

Tips on hiding the checkbox within the Material UI TextField input when using MenuItems with checkboxes

I've customized the MenuItems in a TextField of type Select to include checkboxes. However, when I select an item from the menu, the checkbox is also displayed in the input field of the TextField. Requirement: I want to hide the checkbox in the TextF ...

javascriptcssreactjsmaterial-ui

Is there a way to decrease the speed of a range slider?

Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...

javascripthtmlcssluaslider

The ajax response is returning the entire page's html code instead of just the text content from the editor

I've been working with CKEditor and I'm using AJAX to send the editor's content via POST method. However, when I try to display the response in a div, the HTML for the entire page is being returned instead of just the editor's content. ...

javascriptphphtmlajaxckeditor

Having difficulty utilizing Objects.key.map() for mapping purposes

I'm struggling to display my cart status in a JSX table and facing challenges. The state Chrome Console shows this Object output: { "cartItems": { "5": { "id": 5, "name": "Aut assumenda.", "price": 526, "quantity": 1, ...

javascriptreactjs

Utilizing filters in Angular JS to traverse a multidimensional array object with nested response nodes

From an array of objects, I am trying to filter based on the response_id key. This key is nested within the response object. If I input 23764 and 23765, I want to retrieve Question objects that have AT LEAST 2 RESPONSES with those specific ids as the only ...

javascriptangularjsjsonfilter