How come the Bootstrap navigation bar is stretching off the screen in landscape view on mobile devices?

I recently created a website at . When I view this website on Google Chrome using the device toolbar to simulate landscape mode on mobile, the navigation menu works perfectly. Bootstrap adjusts the height of the navigation div and allows for scrolling. In the developer tools, Bootstrap uses the following media query:

@media (max-device-width: 480px) and (orientation: landscape)
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 200px;
}

However, when I actually open my website on an Android phone in landscape mode, the max-height: 200px rule is not applied. As a result, the last two navigation items extend below the screen, making them inaccessible. This leads me to question:

Why does the Bootstrap navigation extend below the screen in landscape mode on phones?

androidhtmlcsstwitter-bootstrapscreen

Answer №1

In today's world, a typical 5-inch mobile phone has a height of more than 600 logical pixels, which poses a problem when using the bootstrap media query designed for heights less than 420 logical pixels. This discrepancy led me to create a custom media query in my style.css file:

@media (max-device-height: 480px) and (orientation: landscape)
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 200px;
}

Considering that my navbar-header is 60px tall and the navbar itself is 310px tall, I required a media query with a max-width equal to or greater than 370px.

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

React counter variable failing to increment

I have 6 cubes displayed on the screen along with a counter. Whenever a cube is clicked, its background color changes to red and the counter increments by one. However, I'm facing an issue where the counter remains at 1 even after clicking on multiple ...

javascripthtmlreactjsarraysreact-hooks

Unable to interact with webpage element using Java and Selenium_INVALID

I have attempted various methods such as WebDriverWait, .click(), .sendKeys(Keys.RETURN), implicitWait, explicitWait, and more, but I am facing difficulties in clicking on this specific web element. Here is the HTML code snippet that I am trying to intera ...

javahtmlseleniumautomationselenium-chromedriver

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

Adjusting Column Order in Bootstrap 4 for Responsive Screen Sizes

For my website, I envision having a layout where, on medium-sized screens and larger, there is a phone on the right side and text on the left. However, if the screen size is smaller than medium, I would like the text to move below the phone. <section i ...

htmlbootstrap-4

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

Converting a program developed in Visual Studio on Windows 10 UWP to Android or iOS

Is there a tool available that can transform a basic app created in Visual Studio using UWP into an Android or iOS version? Appreciate any insights! ...

c#androidiosuwp

The page is present, but unfortunately, the content is displaying a 404 error. I am considering using Selenium to retrieve

Is there a way to use Selenium webdriver to download images from a dynamically updated website, like this site? Every day a new page is created with images uploaded around 6 pm. How can I retrieve these images using Python and Selenium? url = 'http:/ ...

pythonhtmlseleniumselenium-webdriver

Accessing Photos from Android Gallery

Seeking assistance on retrieving an image from the gallery within this app and then uploading it to my PHP server upon button click. Why is the "selectedImagePath" returning as null? If anyone has a solution, please provide guidance. Thank you in advance. ...

androidandroid-intentandroid-gallery

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp

How can one ensure that a table remains responsive despite facing constraints?

In my responsive website, I've encountered an issue with the table I created. While it is responsive up to a certain width, beyond that point, it displays poorly. Are there any alternative solutions to solve this problem effectively? ...

jqueryhtmlcss

Ways to eliminate spacing around icons in BottomNavigationView in Android

Currently, I am facing a challenge in removing the margins from the icons within a BottomNavigationView on Android. Although I have successfully eliminated the text by utilizing app:labelVisibilityMode="unlabeled", I am struggling to get rid of the default ...

androidkotlinandroid-studiomaterial-ui

I am encountering issues with my local storage not saving data, without any apparent reason. This is my first time

I have a function that is triggered when the page loads. It successfully saves items until the page is refreshed. Now, I want to use this array to calculate the maximum score for future games. Since I am new to using JSON, some explanation would be appreci ...

javascripthtml

The table is hidden and the buttons are unresponsive when inserted using jQuery

Exploring blueimp's jQuery-File-Upload Demo has been occupying my time recently. After studying it for several days, I feel like I've gained a solid grasp of how it functions. However, as someone with limited experience in web development, there ...

javascriptjqueryhtmlcss

Concealing a div element while ensuring that it does not obscure any of its contents

There is a challenge I'm facing that I need help solving. I am using a shop script that only allows me to edit the CSS file. Within this setup, there is a div with a background image and inside there is a normal image: <style type="text/css"> ...

htmlcssmedia-queries

Unable to access the 'localStorage' property from 'Window': Permission denied

Check out my website www.abc.com Incorporating an iframe in www.abc.com using <iframe src="www.xyz.com"></iframe> An issue has arisen: Error message: "Failed to read the 'localStorage' property from 'Window': A ...

javascripthtmljqueryangularjs

Tips for transferring a value from a function in ASPX to a CS file

I seem to be overlooking a small detail. I have a dropdown list (DDL) and a function in my C# file. I want to pass the 'value attribute' of a selected DDL option to my function, but I can't seem to retrieve the value attribute. I checked the ...

c#javascripthtmlhtml.dropdownlistfor

Align the content at the center within a Bulma column

I am working with multiple columns, each column containing a circle in the CSS depicted as a font awesome icon centered within it. However, I am facing an issue where the circle remains aligned to the left while the text itself gets centered. HTML <di ...

htmlcssbulma

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

htmlcssrknitr

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

Struggling to make a click event work in aframe

Attempting to develop an inventory system for a game using the AFrame library has been quite challenging. I have a specific custom component in place that should make the item I am picking up invisible while making the in-hand item visible. However, for so ...

javascripthtmlaframegame-development