Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice or suggestions would be greatly appreciated!

<!doctype html>
<html>
<head>
...

And here is the css:

@charset "UTF-8";
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2 family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');
/* Body */
body {
...
}
...

Answer №1

Note: It seems you missed closing your media-query, located at line 51 in your CSS file.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {

This indicates that the styles within the media-query won't be visible unless matching the specified screen conditions.

I couldn't determine the intended purpose of the media-query, but by commenting it out, the CSS displayed correctly on the website.

@charset "UTF-8";
... <!-- Your remaining CSS code here --> ...

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

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

Switching the file format from HTML to .ASP resulted in the loss of the website's design elements and images

After initially creating an HTML file, I decided to rename it with a .asp extension for uploading online. To do this, I copied the original HTML file and moved it into a folder containing .asp files. However, after replacing the existing file, my website l ...

Connecting queries in php

I am looking to connect searches from a checkbox form together. For example, if I select checkboxes a and b, I want the search results to display two different outcomes. <form role="form" action="R.php" method="post"> <div class="form-group"&g ...

Can WireMock be used to send an HTML file as a response?

Is it possible to return an HTML file as a response in WireMock and how can this be achieved? ...

Adjust the filter settings in angularJS

I am working on a request page with three buttons: Open, Close, and All. Currently, when the page is opened, it displays the 'All' requests by default. However, I want to change this to show the 'Open' requests instead. I want users to ...

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

Glitch found in Safari involving innerText of elements

Hey everyone, I posted this question not too long ago but now I have some images to share regarding the issue with Safari. When checking the console in Safari, the following text is displayed: <div id="rot3posDisp" class="rotDisp">C</div> Ho ...

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

Parent div not properly adjusting its height

I am currently working on developing a fluid layout, however I have encountered a minor issue with the height of the container. The outer <div> (highlighted in yellow, ip_A-1) is not adjusting its height according to its child elements. You can view ...

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

Reveal Password Feature in Angular After User Click

I am working on an inventory page that includes a password field. My goal is to initially hide the password and display it as points (****) instead. I would like the password to be revealed either when clicked or through a pop-up. JS var retrieveCert ...

Display a loading image during the execution of the Exec_Shell Script

Looking to add a loading image while script.sh is executing Check out the code snippet below: <?php if (isset($_POST['restartserver'])) { shell_exec("my-script.sh"); } ?> <html> <body> &l ...

Python: HTML regex not finding a match

This is the code snippet I am struggling with: reg = re.search('<div class="col result_name">(.*)</div>', html) print 'Value is', reg.group() The variable 'html' holds content like this: <div class="c ...

Learn how to design a customized loading screen using CSS with Phonegap

Currently working in Android with Phonegap / Cordova, I am faced with the challenge of optimizing page loading time due to numerous DOM objects being created. To address this issue, I am attempting to implement a "Loading..." screen to prevent users from b ...

Presenting two arrays simultaneously creates angular duplicates

Encountering an issue while trying to display two arrays containing channel information: List of channels List of subscriptions that users have opted for. channels = [ { "id": 1, "name": "arte", "service&q ...

Bootstrap 5 - Achieve automatic column width within a row

In my Bootstrap 5 setup, I have a variety of pages that have different column layouts - sometimes 2 columns, sometimes 3. The template system I'm using dynamically adjusts the layout to accommodate the need for a third column when necessary. <div ...

The mobile screen size shortcuts are malfunctioning, while the regular links are functioning properly

ISSUE: Links in alias buttons are not working on mobile screen size, while normal links to other webpages like social media work fine. Description I created a project using an HTML, CSS, JS building tool from The project was exported and placed into a ...

"Troubleshooting the lack of background image display in Next.js when using

Can anyone help me figure out why my background image disappears when I add a linear gradient? It shows up fine without the gradient, but as soon as I include it, the image vanishes. <div className="hero" style={{background: "linear-grad ...

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...