The map obtained from the Google Maps API is covering up the footer on my website

I'm running into an issue with the Google Maps API on my website. When I try to resize the window, the map ends up covering the footer. My goal is to create some space between the map and the footer.

Here's how it looks in a large window:

And here's how it appears in a smaller window:

Below is the HTML code for the page:

<section class="contact">
    <article class="contact">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet</p>
        <div class="carte">
            <div id="map_canvas" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
                <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
                </div>
            </div>
            <p></p>
    </article>
</section>
<footer>
    <p class="align-droite">
        <span>Lorem ipsum</span>
        Dolor sit amet
    </p>
</footer>

</body>
</html>

And here is the CSS code used on the page:

footer{
        width:100%;
        font-family:'karla';
        text-align:right;
        margin-top:1%;
}
.carte{
        height:95%;
        margin-bottom:3%;
}

I've attempted adding margin properties without success. Is there a solution to this layout issue?

Answer №1

Visit this JSFiddle link to explore a CSS framework for creating headers, footers, and body elements. The CSS code is well-commented to guide you through the customization process. With the run button on JSFiddle, you can instantly see how your changes affect the design.

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

Functioning on JSFIDDLE, though facing issues on .html files

I'm baffled. The code snippet below functions perfectly on JSFIDDLE, but it's not working properly on my own webpage. The code is supposed to duplicate everything inside the DIV element. To see it in action, check out this link to the working JSF ...

The HTML marquee element allows text to scroll sideways or

Has the html marquee tag been phased out? If so, what are the current alternatives available for achieving a similar effect on modern browsers? I am looking to implement a basic marquee effect on my Joomla page. ...

Components will be displayed without any gaps on smaller screens

I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows: <div> <CustomPageHeader pageTitle={t('offersPage.pageHeader')} ...

Transforming XML into XSLT: An Innovative Approach

I am facing a challenge with an XML File that contains a very large amount of content. Fortunately, I have an xsd file to accompany this xml document. For example: Take a look at this link If you want to view the XML Content: To access the XSD for that ...

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

Are you able to choose the nth element within a Bootstrap column class in order to generate columns of varying sizes?

Is it possible to access the nth element of a column in Bootstrap v4.6 to change its size? I am looking to have 2 cards with unequal columns on the top and 2 cards with unequal columns on the bottom. <!doctype html> <html lang="en"> & ...

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

Enhancing the appearance of standard HTML checkboxes

This HTML snippet displays a pair of checkboxes positioned side by side <div id="mr_mrs"> <ul class="mr_mrs form-no-clear"> <li id="mr" class="popular-category"> <label for="Mr" id="mr">Mr</label> ...

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

Issues with Thunderbird not displaying copied HTML emails

Hello there amazing people at Stackoverflow. I need some assistance with HTML formatting. I am currently working on a bootstrap modal that is being dynamically modified through jQuery using the append() function. Check out the code snippet below: <div ...

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

Is it necessary for me to develop a component to display my Navigation Menu?

After designing a Navigation menu component for desktop mode, I also created a separate side drawer component to handle variations in screen size. However, a friend of mine advised that a side drawer menu component may not be necessary. According to them ...

What could be the reason my HTML page is not properly rendering with my CSS file?

My stylesheet doesn't seem to be applying properly. Initially, I had all my CSS in the same HTML file. Then I created a separate CSS file and copied all my styles onto that file, but now the styles are not being applied. I have already checked for sy ...

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

Ensure uniform column width for recurring rows in CSS grid, irrespective of content width

Is there a way to ensure that a CSS grid maintains the same width for repeating rows, even if the content in each cell varies in length? I am attempting to set column 1 to be 10% width, column 2 to be 45% width, and allocate the remaining space to column ...

Creating a Authentic Screw Top Appearance with CSS

I am striving to create a realistic screw head. Here is what I have done so far: <div class="screw"><div class="indent"></div></div> .screw { position: absolute; top: 10px; left: 49%; width: 30px; height: 30px ...

What is the easiest way to import a CSS file into just one specific page in Ionic2?

Take, for instance, my desire to import the following: <link rel="stylesheet" href="mycss.css"> into example_page. I attempted importing it from index.html, but I fear that by doing so, the CSS will be loaded on every page each time I run my app. I ...

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

How can I implement a search box on my HTML website without relying on Google Custom Search?

Greetings to all! I am currently managing a website filled with HTML content. I am looking to incorporate a search box into the site. After researching on Google, most of the results point towards using Google Custom Search. However, I require a search box ...