Changing the Color of Text on Your Mobile Website

I'm currently struggling with a minor issue on my website where the body text appears in white on desktop, which is fine. However, on smaller devices, the white text blends into the background and becomes unreadable. Is there a way to change the text color for mobile versions using CSS or HTML?

View how it looks on Desktop

See how it displays on Smaller Screens (Phones, Tablets, etc)

Previous edits from Stackoverflow (which were unsuccessful):

CSS:

@media only screen and (max-width: 600px) {
    .mob1 {
     color: #ffffff;
   }
  }
  
@media only screen and (min-width: 600px) {
    .mob1 {
     color: #000000;
   }
  }

HTML:

<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
  • I attempted adding "mob1" to the p class, but it did not have the desired effect.
htmljquerycsssaas

Answer №2

Give this a shot!

In your HTML document, if you're dealing with a paragraph element or any other text element:

<p class="colorChange">TEXT</p>

In the CSS file:

//For screens smaller than mobile
@media only screen and (max-width: 600px) {
  .colorChange {
    color: black;
  }
}

//For screens larger than mobile
@media only screen and (min-width: 600px) {
  .colorChange {
    color: white;
  }
}

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

I have a task to execute an Ajax request to retrieve and display data from my database table. My approach involves utilizing Perl CGI and attempting to invoke a Perl script using JavaScript

Encountering an issue in the web console with an error in the document.ready function showing an uncaught syntax error unidentified identifier. This CGI script contains JavaScript that calls a Perl script (TestAj.pl) which returns JSON data. I'm atte ...

javascriptjqueryajaxperlcgi

Mouse click failing to trigger CSS property update

I am attempting to create an accordion feature. I want the accordion to expand when hovering over the "accordion head," and also show/hide the accordion body when clicking on the "accordion head." I have successfully implemented the show/hide functionalit ...

javascriptjqueryhtmlcss

It may display a user, but it reveals all users on the table to me, and I am specifically seeking one with $_session

I am looking to display specific user information using a $_session variable. Currently, I have it working with a table format but I want to avoid using a table and instead use a CSS div. However, when I tested this, I encountered an error message saying " ...

phphtmlmysql

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

I'm looking for a tool or plugin for webpack that can generate inline CSS directly from SASS code

Looking to generate a unique HTML code using only inline CSS. Here is the initial HTML file: <div id="highlighted">This is the highlighted text.</div> Accompanied by this Sass file: #highlighted { background: #ff0; } Now, the goal is t ...

htmlcsswebpacksass

Displaying numerous database rows through SQL with the aid of PHP and JavaScript (specifically AJAX) on the frontend of a website

I am a beginner in the world of PHP and JavaScript (Ajax) and despite my efforts to find a solution by looking at various posts and websites, I have not been successful. My goal is to display all related database rows on the front end of a website. While ...

javascriptphpjquerymysqlajax

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

htmlcsssafari

Avoiding the stretching of images in a bootstrap carousel is a top priority

I'm facing an issue with my Bootstrap 4 carousel that takes up a large portion of the page. The images are loaded through an ajax request once received. Since all the photos are taken on a phone, they are either in landscape or portrait style. The p ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be the reason for the lack of definition of the `pieceOfText

My latest project involves a fun guessing game centered around decrypting text, but I've hit a snag with a variable in my JavaScript code. This variable, known as pieceOfText, should be assigned a random piece of text from an array containing 3 encode ...

javascripthtmldebugging

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

After successfully setting up the Angular 2 quickstart and connecting to an express server, I encountered a problem when switching from using the template property to component templateUrl. I have created a Plunker to showcase this issue: Plunker Demo imp ...

javascriptangularjshtmlrecursion

Allow the content to be scrolled

When it comes to my CSS script, I encounter no issues on larger computer screens. However, users with smaller resolutions like 1024 x 768 are experiencing problems viewing the entire HTML page. Only half of the page is displayed, making it impossible for t ...

htmlcss

Have an overlay on a specific area of the webpage while ensuring the remaining sections remain interactive to the user's inputs

Looking for a way to add an overlay in a specific area of a webpage without blocking the other sections? I attempted to use the LightBox feature from primefaces components, but it didn't give me the desired result. I'm struggling to keep the unco ...

cssjsfprimefaces

Display specific content according to the hash in the URL

I have a website with a page (/categories.html) that contains around 50 p elements: <p id='BCI'>Blue_colored_items</p> <p id='RCI'>Red_colored_items</p> ... What I want is for the page to only display: Blue_co ...

javascriptjqueryhtmlcsshash

Is there a way to eliminate the right margin in React?

I am currently working with React to layout three elements below the topElement. My goal is to have these 3 elements fill up the space equally beneath topElement, removing the right-hand gap highlighted in red in the provided image (while keeping the gap a ...

cssreactjstypescriptmaterial-ui

Can we save javascript-generated HTML audio as a file on the back-end server?

In my latest project, I am building a JavaScript sequencer that controls HTML audio using intervals and timeouts. The goal is to handle all the processing and recording on the back-end while displaying a "Processing..." message to the user, and then utili ...

javascriptjqueryhtmlaudiomp3

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

It is impossible for Javascript to access an input element within a gridview

I have developed an asp.net page that allows a site administrator to select a user as the 'systems chair'. The page displays users in a gridview and includes a column of radio buttons to indicate who the current chair is or to change the assigned ...

javascriptjqueryasp.net

Whenever I attempt to include additional drop-down lists, jQuery fails to function

My webpage features multiple drop down lists, with one populating based on the selection from another. Additionally, I have included a button at the bottom of the page. When this button is clicked, I need to add another column to the page. However, after ...

javascriptjqueryhtml

Guide to showcasing images dynamically within a table

I am currently working on a dynamic table that updates its data using a script. My goal is to also display corresponding images of the groups next to their names in the table. Whenever the group names change, I want the images to change as well. The funct ...

javascriptjqueryimage