If you visit this page:
The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue?
If you visit this page:
The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue?
Your recent searches are currently using floats. While this is okay, it's important to clear them at the end. You can achieve this by adding a "clearfix" class to the main div of the "recent searches":
Here's the CSS code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
After applying the clearfix class, your div should look like this:
<section class="s-content home-page clearfix">
Using floats causes elements to float on the page, which can sometimes lead to unexpected layout issues. By using the clearfix class, you clarify where the div ends and prevent other elements from starting within the floated section.
In addition to clearfix, there are other methods to address this issue, but they may not be suitable for your current layout. If you'd like more information on what a clearfix does, check out this informative post about clearfix.
It appears that you have utilized media queries to adjust the positioning of the recent search division, floating it to the right on full screen and left on mobile devices.
To resolve the problem, consider eliminating the float property on mobile screens.
Eliminate the float left property from that particular section:
@import only screen and (max-device-width: 1024px) and (orientation: portrait), only screen and (max-width: 1024px) and (orientation: portrait)
.home-page .recent-search {
width: 100%;
/* float: left; */
clear: both; /* you don't need this either */
}
Here's how to address it on mobile devices:
@media (max-width:767px){.recent-search{ height:auto;}}
Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...
column-fill: balance; is said to "equally divide content between columns". It appears to be functioning correctly in Firefox and Edge. However, Chrome (and Opera) seem to have a strong aversion to the second column, leaving it mostly empty. It seems to be ...
I have three rectangles set up like this. I've managed to make them disappear when clicking the close button on the right side of each rectangle, but I'm struggling with getting the remaining rectangles to move upward to fill the empty space. Her ...
https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...
Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...
Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...
Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...
On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...
Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...
I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...
I am currently working on creating a custom shimmer loader using CSS3 keyframes animation within the shadow DOM. While the shimmer effect displays perfectly in Chrome and Safari, it seems to be malfunctioning in Firefox. Below is a concise snippet that de ...
After migrating my website to a new server, I encountered an issue where all the $().get("whatever.php") calls were failing. Previously, everything was functioning properly but now none of the requests are even reaching the php script. For instance: inde ...
Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...
After reviewing the HTML content, it seems that I have successfully located the desired element using the following command: driver.find_element_by_xpath('//div[@id="day-number-4"]') The div ID 'day-number-4' is unique on th ...
Have you ever noticed a peculiar behavior of jQuery selectors? I recently discovered that when the page contains elements with non-unique IDs, jQuery returns different results for the same selectors: Here's an example of HTML code: <button id=&ap ...
How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...
I'm looking for a way to set up my menu in the header using "include/header.php" and have it so that when I click on a link, it takes me to that page while also changing colors to indicate it's active. Would jQuery or PHP be more suitable for thi ...
I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...
My current issue involves utilizing an AJAX loader to conceal my page until all elements have loaded. Unfortunately, the navbar is not hidden along with the other content as shown in the image below. I need assistance in ensuring that everything, including ...
Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...