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;}}
I have a tab code that uses ajax data attributes to load content. The tabs are loaded with ajax from PHP code based on the data attribute. How can I add a fade in/out effect to the tabs' content? I've attempted it but haven't been successful ...
I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...
I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficult ...
I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...
Working on making my webpage responsive for iPad and mobile devices. While adjusting the media query, I noticed a white area at the bottom of the page that seems to be outside the body element. Unsure of where it's coming from. Any help would be great ...
Below is the code found in my index.html file: <!DOCTYPE html> <html> <head> <script> function createDialogBox() { var dialogBox = window.open("in1.html"); dialogBox.nameBox= "my little box" } window.onload = createDialogBox; wind ...
Currently, I am working on transitioning a website that I created in the Atom text editor to an ASP.NET environment. To adhere to best practices, I have decided to implement the MODEL VIEW CONTROLLER design pattern in this project. While attempting to ad ...
I am new to using react redux loading bar and redux forms After clicking a button, I want the loading bar to display. The issue arises when I try to load the loading bar, resulting in the following error message: proxyConsole.js:72 TypeError: Cannot read p ...
My form has the following appearance: https://i.stack.imgur.com/T3NQW.png Upon clicking the submit button, the textbox fields display a red border due to the required attribute. Afterwards, I aim to click the reset button in order to remove the red bord ...
I am attempting to implement CSS styles. @import url("http://mydomain.com/theme/css/reset.css") However, it seems that the styles are not being applied. When I access through the browser, I can see all the CSS rules loading. What am I doing incorrectly ...
I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...
Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...
I've been experimenting with building a webpage that allows users to search through a .txt file using only html and php. Below is the code I have come up with: <?php $file = 'myfile.txt'; if (preg_match_all($pattern, $contents, $matches ...
Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...
I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...
I'm stuck on a personal project and could really use some help. If anyone has any feedback, it would be greatly appreciated. Thanks in advance. In my index.php file, I have a div with the id main-container. Inside this container, there are two separa ...
Help needed to ensure button responsiveness within a table. Here's how it appears on desktop and mobile screens: Desktop View Mobile View The delete button is somewhat obscured in the mobile view. This is the corresponding HTML code: <div ...
I am new to AngularJS and currently working on a project where I need to include multiple JavaScript files in my index.html page. After doing some research, I came across a post on Stack Overflow that mentioned the importance of including the angular.js fi ...
I am encountering a problem with this event listener. I attempted to add an event listener to the submit button, but it seems to be inactive. I can't figure out what mistake I have made! Here is my code: const form = document.getElementById("form") ...
Asking a user to go through a series of questions and answer them, with their answers being written to a file named mydoc.doc on the user's desktop. Currently facing an issue in Python where I need to create a table that generates the same number of r ...