What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried making various changes, but nothing seems to work. Recently, I started using Bluehost's CloudFlare service, so I'm not sure if that has anything to do with it (I am FTP'ing while in dev. mode on CloudFlare). I have been using Google Chrome as my browser on the tablet throughout. Hopefully, this posted information can shed some light on the issue. Thanks!

<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if lt IE 9]>
    <html lang="en" class="ie8">
    <link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>   
    <html lang="en" class="ie9">
    <link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
cssftpmediatabletcloudflare

Answer №1

Just a short while ago, they were functioning perfectly...

If what you're saying is that the 2 iPad CSS stylesheets were previously working but are no longer, it could suggest either a caching issue with CloudFlare or a CSS error within the stylesheets. It's also possible that styles from another stylesheet are taking precedence.

You can troubleshoot each possibility by:

  • Creating duplicates of the last 2 stlyesheets and updating the HTML accordingly
    For example: 
    <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css">
    . This will help rule out a caching problem.
  • Validating the last 2 stylesheets using W3 CSS validation tool
  • Adding a new test selector to each of the last 2 stylesheets to see if changes persist, for example: 
    body{background-color:green !important;

These are the most probable causes that come to mind. Good luck!

`

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

Preventing users from clicking on links unless they double click by using CSS rotation

I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated! Check out the ...

htmlcss

What steps should I take to resolve the textarea border bottom CSS effect?

My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance) How can I adjust the height of a te ...

javascripthtmlcss

Tips for combining a select option and search field into a seamless integrated feature

I'm looking to implement a search field in my project that includes the ability to select specific parameters before running the search. I want it to have a seamless design similar to the image shown below. Although I couldn't find a matching co ...

javascripthtmlcssreactjsmaterial-ui

Button-operated lightbox image slider

I am currently developing a website on WAMP where users can store images and view them in a lightbox effect. I have successfully implemented the lightbox effect, but I am facing challenges with moving between images within the lightbox. <html> <? ...

javascriptphpjqueryhtmlcss

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

cssangularmodulesassangular6

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

How to solve z-index issues with two absolutely positioned divs in IE6

Dealing with IE6 bugs has left me exhausted. The problem lies in two (position:absolute) divs that are not functioning properly in terms of their z-index. Here is an example: /* css */ #overlay{ position:absolute; height:1200px; z-index:2; ...

htmlcss

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: const path = require("path"); var webpack = require("webpack"); let H ...

cssreactjswebpackag-gridag-grid-react

What is the best way to decrease the size of a SELECT element in Bootstrap 3?

Is there a way to combine form-control and input-mini classes in order to create a SELECT element with a width of around 60px and a height of approximately 20px? <select id="RoleSelect" class="form-control input-mini { width: 60px; }" runat="server"> ...

csstwitter-bootstrap

Issue with Jekyll (seems like the stylesheet is missing?)

While attempting to fork a Jekyll theme and build the Github Page, I noticed that the generated page looks different from the original one I followed the instructions to change the baseurl in _config.yml, without making any other modifications. The only ...

cssyamljekyllgithub-pages

Building with bricks and mortar does not involve organizing visual content

I'm currently trying to organize some fairly large images using masonry, but the code below doesn't seem to be working. I'm using node.js with express and have installed the masonryjs package in an attempt to make it work, but that approach ...

javascriptcssnode.jsexpressmasonry

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...

javascripthtmlcssiframecross-domain

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

javascripthtmlcssjquery-select2

Removing outlines on <p> <a> or <div> elements with Ionic and Angular seems to be a challenging task

Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. ...

htmlcssangularionic-framework

Tips for creating animations with multiple elements that share the same classes

I am trying to create expandable boxes that can open onclick and close again by clicking on the X. The issue I'm facing is that the close jQuery function isn't working. However, my main concern is how to optimize the code so it doesn't becom ...

javascriptjqueryhtmlcssoptimization

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

javascripthtmlcssreactjsmaterial-ui

CSS: Adjusting the top margin of a font

I admit, the title of this question may not be the most creative, but I've hit a wall in my search for answers. It seems like I must be missing something fundamental in CSS, or perhaps my search terms are just off. Here's the issue: I have a con ...

cssfontsmargin

How to customize the colors of imported images in next.js

In my next.js app, I designed a unique icon and uploaded it as an SVG file. Now, I am looking to add a feature that allows users to personalize the color of this icon by choosing from options like red, yellow, black, etc. However, since the image is static ...

cssreactjssvgnext.jsnext-images

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material