The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine on other browsers and devices.

link: referencelink

<link href="css/mobile.css" rel="stylesheet" media="screen and (max-width: 390px)" />
<link href="css/mobile.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)" />
<link href="css/mobile.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 768px)" />
<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 769px)" />

This query is only maintained for fluidity. Any help would be greatly appreciated!

javascriptjqueryhtmlcsssafari

Answer №1

Consolidate all your CSS code into one main file by utilizing the following technique:

HTML:

<link href="css/style.css" rel="stylesheet" />

style.css code: 

@media screen and (max-width: 390px) {
/* 
*** Insert CSS properties here ***
*/
}

@media screen and (min-width: 391px) {
/* 
*** Insert CSS properties here ***
*/
}

@media screen and (min-width: 501px) {
/* 
*** Insert CSS properties here ***
*/
}

@media screen and (min-width: 769px) {
/* 
*** Insert CSS properties here ***
*/
}

This method has been thoroughly tested and proven effective in all of my projects.

Answer №2

Start by establishing a CSS file and inserting the code using this approach

@media (min-width: 500px ) and (max-width: 800px)  {  

/* Include your desired CSS properties here */ 

}

Answer №3

During the process of creating my inaugural webpage on a Mac text editor, I encountered a similar issue.

To resolve this dilemma, I made adjustments to the quotation marks on the keyboard. To do so:

Go to preferences > keyboard > text

On the right side, locate the options for double and single quotes. Choose the option with simple type of quotes to rectify the problem.

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

Replacing an array element in React.js

Here is a React.js code snippet where I am trying to utilize an array called distances from the file Constants.js in my Main.js file. Specifically, I want to replace the APT column in the sampleData with a suitable value from the array distances extracted ...

javascripthtmlreactjsmaterial-ui

The issue persists with react-hook-form and Material UI RadioGroup as the selected value remains null

Having trouble with RadioGroup from Material UI when using react-hook-form Controller. I keep getting a null selected value, even though my code seems right. Can you help me figure out what's missing? import * as React from "react"; import { ...

javascriptreactjstypescriptmaterial-uireact-hook-form

Submit button remains inactive even after submitting form via ajax request

I have a page with multiple forms on it for a CRM that I am developing and each form is properly named, but I am facing an issue where the submit button remains disabled after making a $.post() request. Here is my universal post handler for form submissio ...

jqueryajaxhtmlforms

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

The sequence of loading styles is respected, yet Bootstrap continues to take precedence over the WordPress child

After putting together a WordPress child theme that correctly displays Bootstrap and child-styles.css in the source code, I encountered an issue: View Source Code Stylesheet Order Upon inspecting with Chrome, it's apparent that the color of my link ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

Deleting an HTML column that has a dynamic header name <th> can be achieved by following these steps

I have a script that can add a new column to an HTML table. When the user clicks on add group, the header will change to Group1, Group2, and so on. I am currently adding a function for delete group that can delete all the added columns. The issue now is th ...

javascripthtmljquery

Creating an HTML button to reveal additional text on the same page

Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...

javascripthtmlcssbutton

Unable to save the session identifier from the response headers while utilizing sessions in react/frappe framework

I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...

javascriptreactjserpnextfrappe

What can you do with jQuery and an array or JSON data

Imagine having the following array: [{k:2, v:"Stack"}, {k:5, v:"Over"}, , {k:9, v:"flow"}] Is there a way to select elements based on certain criteria without using a traditional for/foreach loop? For example, can I select all keys with values less than ...

javascriptarraysjson

Enhance an item by introducing additional properties derived from its current key-value pairs

I have a task of converting the following object: myObj = { "pageName": "home", "dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"} Into this format: myObjMod = { 'pageName': 'home', 'dataExtract&apos ...

javascriptjqueryarrays

Creating multiple React applications using shared configuration files: A step-by-step guide

I am in the process of developing a React app, and my goal is to create multiple React apps that share the same configurations - including modules and configuration files like tailwind.config.cjs. How can I modify my environment to achieve this? My plan i ...

javascriptreactjstailwind-cssviteconfig

Tips for achieving jQuery form submission with Ajax functionality

Currently in my Java application, I am submitting a form using JQuery. Below is the JSP code snippet: <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> ...

javajqueryajaxjspspring-mvc

Mastering sorting in AngularJS: ascending or descending, the choice is yours!

I have set up a table view with infinite scroll functionality. The table contains 2000 objects, but only shows 25 at a time. As the user scrolls to the bottom, it loads an additional 25 elements and so on. There is a "V" or "^" button in the header that sh ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

GIF Embeds with a Discord.js Bot

My bot is currently sending random gifs, but they are not embedded. I would like to send random gifs with embeds instead. How can I achieve this? Here are the codes: if (msg.author.bot) return; if (msg.content.toLowerCase() === prefix + 'xgif&ap ...

javascriptnode.jsdiscorddiscord.js

How can you access the index of an object in Vue.js when one of its properties has been modified

Here's the Vue component code I'm working with: data: function () { return { products: [ { product_id: '', price: ''}, { product_id: '', price: ''}, ], ...

javascriptvue.js

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage

Why does jQuery treat an integer as a string when adding it to a variable?

While working on a for statement, I encountered an issue with adding an integer to a variable that increments. Strangely enough, the addition operation treats the integer as a string. However, other operations like subtraction or multiplication behave as e ...

javascriptjquerystringvariablesinteger

Disappearing Data in Chart.js When Window is Resized

I am utilizing the Chart.js library to present a line chart in a div that is enclosed within a <tr>. <tr class="item">...</tr> <tr class="item-details"> ... <div class="col-sm-6 col-xs-12 chart-pane"> <div clas ...

javascripthtmlcss