Having trouble getting CSS media query to work in my Rails mailer template

Is it true that media queries do not work in email templates? I have a simple test template and a query BUT can't seem to get it to function properly.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Report</title>

      <style media="screen">      
        @media only screen and (max-width: 768px) {
          h1.temp{display: block !important} //testing & not working....
        }
      </style>
    </head>

    <body bgcolor="#f6f6f6">
      <h1 class="temp" style="display: none">Show Me in Mobile Device</h1>
      <%= yield %>
    </body>
  </html>

Answer №1

The 'premailer-rails' gem was a lifesaver for me. If you're looking for guidance on how to implement it, I highly recommend checking out this informative tutorial.

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

What steps should I take to troubleshoot and resolve a malfunctioning jQuery hoverOut function?

There seems to be a issue with the code. The website successfully detects when the mouse hovers over the element and logs it in the console, however, there is an error when trying to log out when the mouse leaves the element. $('.designer'). ...

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this rather than this ? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? class MyComponent extends React.Component { componentDidMount() ...

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

The slider thumb is not showing up properly on Microsoft Edge

Hey there! I'm experiencing an issue with the range slider's thumb display in Microsoft Edge. It appears to be positioned inside the track rather than outside as intended. Take a look at this snapshot for clarification: https://i.stack.imgur.co ...

Display a text box upon clicking an item

I've been curious about how to create the effect of a text box or div that appears when clicked on, similar to what you see in this. Scroll down and click on "show patchnotes"; I've been puzzled by this for a while but haven't come across a ...

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

Tips for creating a vertical scrollbar within a row component

Is there a way to create a scrollable parent v-row with a child v-row overflowing with content so that I can nest another v-row inside the v-col and ensure it remains within the scroll element? <v-row> <v-col> <v-row> <p ...

Creating a scheduled redirect button using JavaScript and another button to cancel it

I'm facing an issue with my code. When the first button is clicked, it redirects the user to a different URL after 10 seconds. However, I'm struggling to make the second button cancel the redirect if pressed before the 10 seconds are up. Despite ...

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Currently, I have a page with five stacked DIVs in a vertical layout. I am wondering if it is necessary to apply the FLOAT property to each DIV to adhere to good coding practices. It appears that there are no issues, such as re-wrapping, in any browser e ...

When the screen size changes, the sidebar in Bootstrap 5 smoothly reveals hidden content

I've been working on a sidebar design and everything seems to be going well so far. However, I've encountered an issue that has been giving me trouble for days now. Whenever I display a new page and then resize the screen, the content of the page ...

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

I attempted to use the window.screen.width method, but it appears that the script only runs once (upon page load). I am seeking a way for the code to run continuously. Below is my JavaScript snippet: var textinSelected = document.getElementById("se ...

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

modify the final attribute's value

Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section ...

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 ...

Can an enterprise level web application be effectively built using [HTML5 + jQuery] (without ASP.NET) + WCF?

We have been utilizing ASP.NET web forms for a long time to get some perspective. While we understand the advantages of MVC over web forms, there's now a suggestion on the table to skip all abstraction layers and move directly from a pure .HTML page ...

What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening? <div> <svg viewBox="32 32 32 32" height="100" width="100"> ...

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...