With two divs side by side, the second div is covering part of the first div when viewed on a mobile device

Recently, I encountered an issue with the mobile version of my website while using a modified classic theme for Prestashop 1.7.6. If you'd like to take a look, here is the link to the site.

Within the footer section, there are two consecutive divs, each containing its own unique content. The first div is identified by the ID block_myaccount_infos, while the second one has the class block-contact.

The first div includes a custom JavaScript function designed to show dropdown content, similar to previous sections on the page. However, upon inspection with the Chrome developer tool, it became apparent that the second div was overlapping the first div.

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

To troubleshoot this issue, I added a line break tag between the two divs, which temporarily resolved the problem. Unfortunately, this is not a suitable long-term solution as I require both divs to remain on the same line in the desktop version of the site.

htmlcss

Answer №1

It appears that a solution to your problem may involve adjusting some CSS settings.

@media (max-width: 1025px)
#footer #block_myaccount_infos {
    width: 34%;
    display: inline-block;
    float: left;

The root cause of the issue lies in the float: left; property in your CSS.

To resolve this, consider modifying or removing the <br> element in your HTML along with the mentioned CSS property adjustment. Hopefully, this suggestion proves helpful in resolving your issue.

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

Move the first column to the right using BS4

Currently, I am working with bootstrap4 and facing an issue where I need the first div column to float right on medium devices and above. However, on mobile devices, it should be shown first. This was easily achievable in bootstrap3 using a structure lik ...

cssbootstrap-4

Transform Arabic numerals into Roman numerals using only CSS styling

Currently developing a custom theme for a website and faced with the restriction of not being able to use Javascript. My goal is to translate certain numbers into Roman numerals. I attempted the following: .score:before { counter-reset: mycounter att ...

htmlcssroman-numeralscss-contentcss-counter

Increase the font size of the navigation bar on smaller screens

On smaller screens like mobile devices, I am having trouble increasing the font size of the navigation bar menu items. While it displays well on desktop screens, the font size becomes very small and difficult to read when the screen collapses to a mobile v ...

htmlcssnavbar

Optimizing Safari for the Best Screen Size Experience

I seem to be encountering issues with optimizing my website. Everything appears to be working correctly in terms of widths, heights, margins, etc., on my laptop. However, when I view the site on an iMac or any other computer with a larger screen size, the ...

css

Unable to locate child after adding element to HTML

I have been attempting to add a child element to my HTML document, and although I can see it in the source code, it doesn't display on the screen as expected. It's quite baffling. Here is the HTML code snippet: <!DOCTYPE html> <html> ...

javascripthtml

What is the process for transforming information from a database into a clickable hyperlink?

My course list includes the following: SE1111 SE2222 SE3333 I want to display this list on my webpage and have it redirect to a page where the course name is saved for future use. Here's what I've tried so far: <div id="join_courses" clas ...

phphtmldatabaseformshyperlink

Get all the counter values from a Bootstrap table within a function

Suppose I have a table displaying 25 records per page with 10 rows. How can I update the counter values for Entries and Total Entries in my function when I filter by "india"? I already have the showing values but need to retrieve the Entries and Total Ent ...

htmljquerytwitter-bootstrap-3

Numerous JQuery AJAX form submissions leading to individual outcomes

I have implemented a script on my page that handles form submissions for multiple forms by calling a specific action. Here is the script: $(function () { $('form').submit(function () { if ($(this).valid()) { $.ajax({ ...

javascriptjqueryhtmlajax

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

javascripthtmlcssflexboxcss-grid

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

Adjust the navigation menu to display or hide as the page is being scrolled

Implementing an offset to display/hide the navigation menu when the page is scrolled 100px. Attempted to modify from lastScroll = 0 to lastScroll = 100 but it did not work as expected. Jquery: Fiddle // Script lastScroll = 0; $(window).on('scroll&ap ...

javascriptjqueryhtmlscrolloffset

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

Is it possible for the entire row to remain hidden if it contains the letter "x"?

This table contains important data that needs to be displayed. HTML <tbody> <tr *ngFor="let data of check" style="text-align: center;"> <td> {{ data.send_date }}</td> <td>{{ data.trading_partner }}</t ...

phphtmlangular

Changing Content Dynamically in Adobe Muse

I'm in the process of creating a website for an internet radio station and I've chosen to use Adobe Muse due to its user-friendly design features. My goal is to have the header and footer sections stay static while only the content on the page ch ...

htmldynamicmuse

Achieving Inline Icons with Text in Bootstrap 5 Button

Looking for some assistance <div class="col-auto mt-lg-0 mt-2"> <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary"> <i class="bi bi-download"></i&g ...

htmlbootstrap-5

Attempting to create a JavaScript calculator from scratch

After spending hours typing and debugging my code for a school assignment, I have created a calculator that still isn't working. I'm hoping someone can help me find the errors in my code. function myStory() { window.alert ("Very doge"); } // ...

javascriptjqueryhtmlcsscalculator

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...

htmlcss

How can you retrieve input values from a form using a button click but without requiring a

I am facing an issue with the delete button on my form. The form has three buttons - one to edit the form on another page, one to add a value on the existing page, and one to delete a value. While the submit and edit buttons work fine, I am struggling wi ...

phphtmlajax

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

javascriptcssvue.jscss-animationsvuejs2

Oops! Slim-loading-bar encountered an error because it was unable to locate the module '@angular/core'

I am currently learning Angular and attempting to integrate the ng2-slim-loading-bar. However, I encountered the following error - ERROR in ../node_modules/ng2-slim-loading-bar/index.d.ts(1,37): error TS2307: Cannot find module '@angular/core'. ...

cssangulartypescript