Disorganized HTML Elements

If you visit diartefloral.tech and use a cellphone in the "Sobre Nosotros" section of the menu, the footer overlaps an image. I'm not sure how to fix this issue. The most relevant code is shown below; I am using Bootstrap. Previously, I had an issue with the navbar overlapping the footer in the morning but resolved it by adding the following code: body{ padding-top:60px;}

.principal{
    background-color: rgb(230,219,241);
}

.container >a{
    font-family: Charmonman, serif;font-size: 35px;padding-bottom: -5px;padding-top: 9px;
}


.site-footer
{
  background: linear-gradient(120deg, #7f70f5, #0ea0ff);
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color: white;
  width: 100%;
  position: fixed;
  bottom: 0;
}
...
... (the CSS code continues)
...

<body {
  padding-top: 60px;
  padding-bottom: 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    ...
    ... (the HTML code continues)
    ...

</body>
</html>

Answer №1

Web browsers will consistently show elements in the sequence they appear in the document object model.

By "customize CSS properties", are you referring to tweaking the styling of your website? It looks like you're making excellent progress with your live site. Just a tip: consider using images that are smaller than 1.5Mb to improve the loading speed of visual content.

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

Sequentially iterate through elements based on their Data attributes

Assume you are working with HTML elements like the ones shown below <span class="active" data-id="3"> Test 3 </span> <span class="active" data-id="1"> Test 1 </span> <span class="activ ...

Steps for revealing all the information from a database when clicking on the 'Read More' button

I recently set up a database called Magazine, featuring a table named social_media. This table consists of 5 columns: ID, Headline, Author, Content Short, Content. The Content Short column contains condensed versions of the articles which are displayed on ...

Navigating with Angular router in a Bootstrap navigation bar

My link is not displaying as a tab (I'm using Bootstrap 4 and Angular 5). Instead, it shows up as just a plain link. This seems like it should be a simple issue, but this is my first time working with bootstrap... Thank you! <div> <nav cla ...

Attempting to categorize TR rows based on a shared attribute

I am working with "domains" and their corresponding "phone numbers". My goal is to group all the numbers by their associated domain. I'm facing challenges in determining when one domain ends and another begins, so I can separate them into different b ...

The edit fields in React Bootstrap are not compatible with the col-N className

I am currently attempting to design a form with 3 label-edit fields placed horizontally. Each set of 2 components (label and edit field) should be of equal width and equally spaced. Here is my code: package.json: { "name": "react", ...

I'm trying to use Javascript to dynamically remove rows, but my code seems to be causing some issues

When a user enters text into a form, it is stored in a variable called 'userInput'. I have an HTML table with the ID "myTable". My goal is to use JavaScript to iterate through the table and remove all rows where the value of the 3rd column does n ...

What causes the vertical width of the clickable area on a range input to be larger than anticipated?

The vertical width of the clickable area (track) on the range input appears larger than expected in my Chrome browser (version 102.0.5005.63). Interestingly, it displays correctly in the code snippet. Is this a bug specific to Chrome? <div id="di ...

Guide on creating an accessible table with rows that can be selected

Managing accessibility in a web application can be challenging, especially when dealing with features like selecting multiple rows using checkboxes. In my current project, I have a view that displays a list of items and allows users to select multiple rows ...

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflowhttps://i.sstatic.net/dhllv.png I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb ...

Setting button height dynamically in React Native

I've implemented a button using React Native Elements in my layout. Here's the code snippet: <Button title="Login" buttonStyle={{ backgroundColor: Colour.green }} containerStyle={{ ...

Obtain the URL of the parent window from a modal dialog using JavaScript

What is the proper syntax for obtaining the URL (specifically, the PATH) of the parent window from a modal dialog box in Internet Explorer. I have attempted several variations such as: window.opener.document.location window.opener.location this.opener.do ...

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

Utilize a Java application to log in to a website automatically without the need to click on

Opening two websites in my application is a requirement. Both of these websites have login forms with the action set to POST method. My goal is to automatically redirect to the next page after logging into these websites when I access them through my proj ...

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Currently, I am in the process of validating my HTML contact form using PHP. To test its functionality, I have tried submitting the form with no data and then attempted again with partial data. While submitting partial data, I noticed that the correct fiel ...

Executing transitionend Using Jest for Unit Testing

I am currently utilizing angular 8 along with Jest for unit testing. My challenge lies in adding a listener for the 'transitionend' event on an element, and I'm struggling to find a way to simulate/mock this event using Jest. this.animatedEl ...

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

As per the twitter bootstrap guidelines, I am supposed to enclose text in a <p> tag for correct leading and color. However, when I try to do this within the navbar element or any of its sub-levels, the text does not inherit any of the styling propert ...

Altering the hue within text/typography

While I may not be a professional web developer, I've successfully created an HTML5 and CSS3 website by piecing together information from various tutorials and conducting Google searches to hack code. My website aims to showcase environmental data in ...

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...

Help needed with debugging CSS for IE6 >_<

I have been working on the following website: www.darksnippets.com While the design looks good on Firefox and Chrome, it appears terrible on IE6. For example, on the home page and other pages like , the width is too wide in IE6. I've been unable to ...