CSS not being applied properly in Devise(Rails) emails when sent to Gmail addresses

Upon a user signing up, I send a confirmation email using Devise's mailer view. While everything else appears to be functioning properly, the CSS for CONFIRM ACCOUNT doesn't seem to be applied at all. I've read that CSS classes cannot be used in mailer views, so I've styled everything with inline styles instead. When I preview the mailer view on my web app, it looks great like this:

https://i.sstatic.net/bfVdw.png

However, in the actual mailer view it appears like this:

https://i.sstatic.net/wqz4h.png

Below is the code snippet I'm working with:

<body style="background-color: #F7F7F7;">
<div class="main wrapper clearfix">
    <div style="border: 1px solid #e4e4e4;
        border-radius: 5px;
        margin: 50px auto;
        padding: 20px 50px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
        background-color: white;
        max-width: 700px;">
        <div style="text-align:center">
            <%= image_tag("logo-green.svg") %>
        </div><br><br>
        <div>
            <p>Welcome <%= @user.first_name %>!</p>

            <p style="line-height: 1.5">Let's confirm your email address. Click the button below to confirm your email.</p>

            <%= link_to 'CONFIRM ACCOUNT',
            confirmation_url(@resource, confirmation_token: @token),
            style: "font-family: Raleway-SemiBold, sans-serif;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                cursor: pointer;
                text-decoration: none;
                color: white;
                letter-spacing: 1px;
                    padding: 13px 30px;
                    font-size: 0.8em;
                    color: #fff;
                    background-color: #00BA9B;
                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                    transition-delay: 0.2s;
                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.26);
                    margin-top: 25px;
                    margin-bottom: 20px;
                    border-radius:" %>

            <br><br>
            <p style="line-height: 1.5">Thanks,<br>website <br> <a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a></p>
            <br>

             <p style="color:grey; font-size:11px;">P.S. If you didn't sign up for website, please ignore this email - apologies for the disturbance.<p>
        </div>
    </div>
</div>
</body>

The styling on

<a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a>
displays correctly in the mailer view. However, the inline styling on CONFIRM ACCOUNT seems to not work. I am curious as to why inline styling functions elsewhere but not specifically on link_to 'CONFIRM ACCOUNT',.

Answer №1

Email client HTML comes with its fair share of restrictions. Discover the do's and don'ts when it comes to email HTML in this helpful guide.

Forget about fancy transitions, unique cursors, or stylish shadows - they're a no-go.

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

Creating an image overlay within HTML text in NSAttributedString with CSS: A step-by-step guide

I am currently working on extracting HTML text that includes a YouTube video. In order to showcase this video, I have implemented a preview image. The original text is as follows: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei ...

The div element displays a vertical scrollbar exclusively

Can you explain why the div is only displaying a vertical scrollbar? Although the canvas is larger than the div in both dimensions: div { padding-top: 2px; height: 709px; width: 889px; overflow: auto; } <div> <canvas width="1405" sty ...

The proper way to link a style sheet within an MVC framework

Currently, I am working on transitioning a website that I created in the Atom text editor to an ASP.NET environment. To adhere to best practices, I have decided to implement the MODEL VIEW CONTROLLER design pattern in this project. While attempting to ad ...

I must click the web icon in order to open the link with buttons

I am having trouble with the buttons I added for my social media links. When I click on the button, it doesn't direct me to the link unless I click on the icon within the button. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7. ...

The HTML retrieved cannot be accessed by external JavaScript code

I've encountered a major issue. I'm using ajax to retrieve content in HTML format, but my main JavaScript file is unable to manipulate any retrieved elements - tags, classes, IDs, you name it. Is this normal? How can I work with the data once it& ...

What is the proper way to display my JS erb code?

My NodesController has a save_video action that redirects to video_tag_users_path(@video): format.html { redirect_to video_tag_users_path(@video) } However, I want it to render tag_users.js.erb instead of the default behavior. This is the tag_users acti ...

Start fresh with the count for every individual table

In my HTML document, I have multiple tables with columns that have classes "valuation" and "valuation_all". If one cell in the "valuation" column contains the text "FAIL", then the corresponding cell in the "valuation_all" column should display "FAIL"; oth ...

Tips for utilizing both noConflict and $ on one page

Can I use both noConflict and $ on the same page? <p>This is a paragraph.</p> <h1>hello</h1> <input type="button" id="=mybtn2" value="jq" onclick="myfun2();" /> <input type="button" id="mybtn" value="$" onclick="myfun(); ...

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

Is there a way for me to display an alert notification when a website requests access to additional storage on my computer?

Is there a way to set up an alert notification in Internet Explorer when a website requests additional storage on your computer? The notification would ask: Do you want to grant permission for this website to use additional storage on your computer? ...

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

Issue with Twitter Bootstrap 3 Sticky Footer functionality in IE11 and IE Edge

My website works perfectly on Chrome, but I'm having issues on Internet Explorer. I would really appreciate your help. The website I am working on is: I am trying to implement a sticky footer on IE, but for some reason, it's not working as expe ...

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended

I'm creating a portfolio website for showcasing my design projects from university. The text in the "my work" section is centered, but it seems misaligned with other elements like buttons when the window width is reduced. What could be the issue? Cod ...

What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...

Material User Interface, MUI, Modal, Back to Top Scroll按钮

After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

AJAX causes Rspec error at end of file

My goal is to test the functionality of sending a survey via AJAX using the POST method. Here is the test code: describe "when completing the survey" do before do visit "/orders/#{@order.disguised_id}?key=#{ENV['admin_code']}" ...

Interactive div with dynamically generated click event

I need to add an onclick event to a button that is being generated dynamically via ajax. How can I achieve this? This is the code responsible for generating the content. When we click on an item, I want a popup window to appear. function retrieveTableDat ...

Is there a way to make a div stay fixed at the bottom of the screen while allowing the middle content to scroll?

I am seeking a way to create a sticky footer that remains visible and anchored at the bottom of the screen, while allowing the middle content to scroll as new content is added. The method I have implemented for achieving this effect is as follows: /* Re ...

Turn off the ability to drag on an HTML page

Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display. HTML structure: <div id="canvas"></div> To populate the canvas with div elements, I'v ...