Unable to change background color in iPhone layout

My attempt to change the header's background color is successful in desktop layout, but not working as expected on iPhone. The header color remains unchanged in the iPhone layout. Below is my code snippet:

http://jsfiddle.net/mzMjT/embedded/result/

<tr>
    <th style="
        background-color: red;
    ">First Name</th>
    <th>Last Name</th>
    <th>Job Title</th>
    <th>Favorite Color</th>
    <th>Wars or Trek?</th>
    <th>Porn Name</th>
    <th>Date of Birth</th>
    <th>Dream Vacation City</th>
    <th>GPA</th>
    <th>Arbitrary Data</th>
</tr>

th {
    background: #333;
    color: white;
    font-weight: bold;
}

Answer №1

Your mobile layout styles are not changing because they are hiding the th elements on small screens and using CSS Pseudo-elements as substitutes for the headers. To style the 'headers' on the mobile version, you can try something like this:

td:before {
    background: #333;
    color: white;
    font-weight: bold;
}

It may require some adjustments to ensure the pseudo elements create a consistent column, but this approach should set you in the right direction!

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

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

Here's my current website setup: My website is modular and uses dynamic inclusion. The header is a crucial part of the main page, which is responsible for displaying content from specific links on the site. External links to CSS and js files are incl ...

Unable to apply styling to body element in style.css file when using Node.js

I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...

What are the key distinctions between DOCS and PSD base64 URLs?

My current challenge involves displaying a preview of attachments. I want to show an IMAGE SVG preview for image attachments and a PDF preview for PDF attachments, both based on their respective base64 formats. For example, I am currently using the split m ...

Discovering an Uncaught TypeError: Unable to access the property 'length' of an undefined value

Looking to implement a function that checks the status of the cart and displays output accordingly. The logic is as follows: If the cart is empty (cart.line_items.length returns false), then the EmptyCart function should be executed. The "line_items" var ...

Issue the token and proceed with redirecting

I am working on an Express app that generates a string token upon receiving a get request and then executes a Python code. The Python code eventually produces a JSON file that needs to be sent in a post request. Since this Python code can be triggered by ...

What is the best approach to incorporate this D3.js HTML element into my AngularJS project for easy manipulation?

I've been experimenting with creating graphs using the D3.js graphical library for Javascript on my webpage. Currently, I can draw a gray line on an SVG using HTML and a red line using Javascript on a new SVG container created in Javascript. However, ...

Is employing the HTML 'confirm' method considered a best practice?

How can I alert a user before they discard changes in a form while switching to another page? Is using if (!confirm("Are you sure")) return false;... considered a good practice for this type of message? Or should I consider using a modal panel instead? (W ...

Tips for effectively applying an image as a border

Just starting out with HTML and CSS here, and I'm trying to figure out how to use an image as a border for a div element. Can someone help point out my mistake? div { width: 240px; height: 510px; background-color: lightblue; border-image ...

Using Xpath to target elements based on attributes and retrieving the values of another attribute

I am trying to extract the datetime attribute value from each li element that contains an attribute type with the value of standard. However, my current code is resulting in an error. Here is the snippet: <li datetime="2019-06-03T14:45" offset="-135" t ...

Looking to modify the color of the post's <h1> heading if there is no featured image assigned to it

While working on my WordPress blog and browsing various other WordPress blogs, I noticed that setting a featured image can really make a difference in grabbing the reader's attention. However, when a featured image is not set, I have a default backgro ...

When the mouse leaves, the background image will revert back to its original setting

https://i.stack.imgur.com/Ojd0Q.pngI need assistance in reverting a div's background image back to its default state using the onmouseleave method. Below is the HTML and JS code I have been working on: <script type="text/javascript"> functi ...

Floating navigation bar that appears and disappears as you scroll

My webpage has a dynamic navbar that consists of two parts: navbarTop and navbarBottom. The navbarTop should appear when the user has scrolled down more than 110 pixels, while the navbarBottom should show up when the user scrolls up. The issue I am facing ...

The Express server is having trouble successfully responding to the Axios CORS Preflight request

I have a get action implemented using react.js that is running on port 3000. var config = { headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type ...

Transferring information from website form to a C# program

Someone suggested using the HTTPListener class, but it appears to only return another web page in response. I need guidance on how to post data from a form on my website and process it in my C# application. If anyone has tutorials or simple examples, the ...

When clicking on Submit, the code does not acknowledge the Verify Function

I am currently facing an issue with implementing the JQuery Ui function "Verify();" to ensure that the name, age, country, and date fields are completed before allowing form submission. Even though I have written the verify function to execute when the us ...

What could be causing my jQuery code to not function properly?

I wrote a small piece of code in jQuery, but I am having trouble executing it. Can someone help me figure out what I'm doing wrong? <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> & ...

Guide to deactivating scrolling on a specific element using jQuery

Can anyone provide a solution for disabling scroll on the window but still allowing scrolling within a text area? I attempted to use the following code, but it ended up disabling everything entirely: $('html, body').css({ overflow: 'hid ...

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

AngularJS: Error - Undefined value instead of a function argument

Recently, I decided to dive into learning AngularJs and took my first steps by setting up a view, service file, and controller file separately. Below is an outline of how I went about it: <html ng-app="myApp"> <head> <script src="https://aj ...

Creating a dynamic bootstrap carousel featuring Instagram-sourced images with a focus on showcasing nearby content

I'm looking to create a bootstrap carousel (or similar responsive slider) that displays images on the right and left of the main image, visible at the sides of the screen. It would be great if these side images had a transparent overlay or blur effect ...