Footer blocks in the Joomla Purity III template are now perfectly aligned on mobile devices

I recently constructed a website using Joomla CMS and the Purity III template. You can find the site here: . Everything is working smoothly and my client is happy, but there is one lingering issue.

On standard screens, the layout appears fine. However, when viewed on mobile devices, the footer blocks do not align properly and end up looking like this:

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

I have tried various methods to correct this issue, but so far have been unsuccessful.

This is how my footer layout currently looks:

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

Does anyone know how I can adjust the buttons so that they are arranged in this manner?

BTN     BTN

BTN     BTN
    BTN
htmlcssjoomlaresponsive-designjoomla3.0

Answer №1

To prevent the icons from encroaching on the next area, include this css attribute:
min-height: 110px;

By setting a minimum height of 110px, you ensure that the items do not overlap with the adjacent icons.

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

Creating a sleek grayscale effect when hovering with CSS is both simple and effective

My website features a grayscale logo that smoothly transitions to color upon hover. However, I am experiencing some issues with the smoothness of this transition when using CSS. Here is my current code: <img alt="TT ltd logo" src="./img/tt-logo.png" c ...

csscss-transitionsgrayscale

Is there an issue with HTML 5 Notifications not functioning properly on Chrome when accessed locally?

Recently, I came across an example for HTML notifications that worked well in Chrome and Firefox. However, when I downloaded it and tried running it locally, it failed to work in Chrome. Is this expected behavior (such as Chrome blocking local notificati ...

javascripthtmlgoogle-chrome

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

Exploring the Features of PrimeNG Table Component in Angular 8

After attempting to implement p-table (PrimeNG table) in my Angular project and importing all necessary dependencies and modules using the CLI, I encountered the following error: ERROR: The target entry-point "primeng/table" has missing dependencies: - @ ...

htmlangulartypescriptangular-materialprimeng

Use Javascript to automatically zoom into a specific div element when the page loads

Encountering a rather unusual problem here that I couldn't seem to find any solutions for on Google. What I want is for a scene to be zoomed into when the page loads. Just picture this scenario: initially, the image below occupies 100% of the window ...

javascriptjqueryhtmlcssiframe

What is the best way to implement jQuery on my website?

Instead of copying all the example code here, you can check out the jQuery demo page: Demo Page I would like to integrate the Latest News example with scrolling text in red from the demo page into my website. The demo page also provides links to the sour ...

javascriptjqueryhtmlcss

Utilizing CSS Selectors for Adjacent Elements

It appears that CSS is indeed right-associative, and unlike traditional programming languages, the use of parentheses does not alter this behavior. Here is the basic structure I am working with: <div> <div class='pizza'></div& ...

csscss-selectors

Issue with making Bootstrap 4 images responsive using the img-fluid class

My latest project involved creating a login page using a bootstrap grid. I designated the image to span col-lg-8 and the form col-lg-4. However, I encountered an issue when resizing the screen for smaller devices. Despite applying img-fluid to the image, i ...

htmlbootstrap-4

Is there a way to incorporate CSS into a JPG file on the server end?

I have some JPGs that need to undergo CSS operations on the server side, such as cropping and rounding corners. Once processed, I want to serve these edited JPGs to clients. The clients themselves are unable to interpret CSS, they can only display JPGs. I ...

cssimage-processingserver-side

inactive toggle being released

I am facing an issue with my two slider menus, where only the right menu holds the active value when clicked. The left menu slides out only when the toggle button is held down, but I need it to slide out when the toggle is simply clicked and not held down. ...

jqueryhtmlcss

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Execution of Javascript within Joomla articles or modules appears to be unsuccessful

Seeking assistance with a Javascript filter issue. The code functions correctly outside of Joomla, but when integrated into Joomla, it fails to execute. Suspecting a conflict or blockage hindering its operation. Tried inserting the code using Sourcerer an ...

javascriptjoomla

Modify table row background color using PHP based on its position in the table with the use of a function

I am having trouble formatting my table to highlight different rows in distinct colors. The top row should be one color, the second row another, and the bottom two rows a different color each. This is to represent winners, teams getting promoted, and tho ...

phphtmlmysqlcss

Basic jQuery template design

Currently, I am developing a user interface that allows users to add or delete items with a similar layout. The process starts with one item and by clicking 'add', more items can be added. These items come in several different types. My current ...

javascriptjqueryhtml

Updating web content on Android Studio's webView

Is there a method in Android Studio to extract specific text from a page's source code, replace it with different text, and then present the modified page to the user? ...

javaandroidhtmlweb

Is it possible to identify an event on an input field that has been disabled using Angular?

I am attempting to retrieve an event when an input field becomes disabled. <input [disabled]='disableTextbox' (click)="delectInput()"> The code snippet above represents my input field. I am trying to capture the event that occurs ...

javascripthtmlangulareventsdetect

How can I stack images on top of each other using Div, CSS, and ZIndex?

Currently, I am facing a challenge with overlapping 5 pictures. Despite reading numerous tutorials on CSS and div overlapping techniques, I still don't quite understand how to achieve it. The container where I want these images to overlap has a widt ...

css

Are Django form widgets like datepicker and tabindex being snubbed?

I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model ...

jquerycssdjangodjango-forms

Switching the entire div when hovering and switching back when hovering out

I have a table and I am trying to change one div to another div when hovering over it, and then change it back when the hover out event occurs. Here is my table: <table id="table2"> <body> <tr> <td> <div id="c ...

javascriptjqueryhtmlcsshover

Error 404: Troubleshooting an Azure Issue with Custom TrueType Font in .NET MVC 5

I am encountering an issue that has been previously addressed. Despite implementing the suggested solutions, the problem persists. In an effort to enhance my project, I downloaded two custom ttf fonts called Monterey and Bakery. Both fonts have been succ ...

cssasp.net-mvcvisual-studioazurefonts