Improve the design of the email newsletter

Having some trouble coding a particular element in my email newsletter layout.

This is the desired outcome: View Screenshot

Here's what I currently have: View Screenshot

Any idea what could be going wrong here?

Check out the code snippet below:

<tr>
    <td style="background-color:#ffffff;">

        <table style="max-width: 535px; margin-top: 50px; text-align:center; margin-left:auto; margin-right:auto;">
            <colgroup>
                <col span="1" style="width: 60%;">
                <col span="1" style="width: 40%;">
            </colgroup>

            <tr>
                <td style="padding:0; background-color:#e9e9e9; text-align: left; font-family: Lora; width:235px;">
                    <div style="padding: 10px 30px;">
                        <h2 style="color:#BF1435; text-transform:uppercase;">Срок завершения работ - 01.09.2023</h2>
                        <p><strong>Всего 25 апартаментов.</strong></p>
                    <p><strong>Редкие планировки - от 25 м².</strong></p>
                        <p><strong>Высота потолка - 3 м.</strong></p>
                        <p><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка элек...</p>
                    </div>
                </td>

                <td>
                    <img src="images/image-card-1.png" style="width:200px">
                </td>
            </tr>
        </table>
    </td>
</tr>
htmlcssemailhtml-email

Answer №1

To improve the visual impact of your image, consider adjusting the height to better showcase the content.

Here's an example:

<img style="width: 250px; height: 400px; object-fit: cover"
src="images/image-card-1.png"
/>

Answer №2

The answer has been confirmed to be accurate:

                                 <tr>
                                    <td style="background-color:#f3f3f3; padding:0; line-height: 0;">
                                        <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate;">
                                            <tr>
                                                <td width="280" style="line-height: 20px; padding: 18px 18px">
                                                    <h3 style="font-size: 22px; padding-bottom: 18px;">Project completion date - 01.09.2023</h3>
                                                    <p style="margin-top:6px; margin-bottom:6px;"><strong>Total of 25 apartments.</strong></p>
                                                    <p style="margin-top:6px; margin-bottom:6px;"><strong>Rare layouts starting from 25 m².</strong></p>
                                                    <p style="margin-top:6px; margin-bottom:6px;"><strong>Ceiling height - 3 m.</strong></p>
                                                    <p style="margin-top:6px; margin-bottom:6px;"><strong>Finished apartments:</strong> walls painted in light tones, bathroom tiles, parquet flooring, electrical wiring installed, and basic connections made.</p>
                                                </td>
                                                <td width="235"><img src="https://drive.google.com/uc?export=view&id=11T9GalUHGUZdRtJcNQlf_p39wTbF5UbRF" alt="Image Column" width="238"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>

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

Alignment issue with Ul dropdown menus and shadow

After stumbling upon a fascinating menu design at this link, I decided to tweak it for center alignment by following the advice on this forum thread. Unfortunately, my efforts have hit a roadblock - the drop down menus aren't aligning as intended and ...

javascriptjqueryhtmlcss

Ways to access the files attribute in an input tag in AngularJS without relying on getElementById

I am currently working on file uploads using AngularJS and I have a question regarding how to retrieve input files similar to regular JS. What I want to achieve: HTML: <input type="file" name="file" id="fileImg" accept="image/*"> JS: var file ...

javascripthtmlangularjsfile-uploadng-file-upload

The mobile menu is not responding to the click event

Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered. Even though I can confirm that my javascrip ...

javascriptjqueryhtmlcss

Using the html5 file reader API in JavaScript to retrieve a file as a binary string and then sending it through an ajax request

I'm attempting to obtain the binary string of files, but I seem to be unable to do so. Why does readAsDataUrl work while readAsBinaryString doesn't? I have posted my code on jsbin and any help would be greatly appreciated. Thank you. Check out ...

javascriptjqueryhtmlfilebinary

Require the capability to bypass inline CSS styling

Currently facing an issue with a wordpress website I am constructing using iThemes Builder. The problem arises when integrating the plugin Jquery Megamenu, as the drop-down menu gets truncated due to an overflow:hidden property that cannot be overridden i ...

jquerycsswordpressbuilder

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

How to handle the "Escape" character in PHP using the echo statement?

A quick question: echo '<button type="button" id="add" onClick="addAsset('.$filename.');"> '.$filename.' </button>'; This piece of code generates a button with an onClick event that adds the asset example.png. Ho ...

phphtmlescaping

Obtain an Element Using Puppeteer

Currently grappling with a sensitive issue concerning puppeteer. The HTML structure in question is as follows: <tbody> <tr rel="0" class="disabled" id="user6335934" class="odd"> ...

javascripthtmlexpresspuppeteer

Steps for inserting an item into a div container

I've been attempting to create a website that randomly selects elements from input fields. Since I don't have a set number of inputs, I wanted to include a button that could generate inputs automatically. However, I am encountering an issue where ...

javascripthtml

The nodemailer module in Node.js encountered an issue while trying to send an email, resulting

Looking to confirm registration, I want to send an email from my server (kimsufi). To accomplish this, I am utilizing nodemailer which can be found at https://github.com/andris9/Nodemailer Encountering the following error: Error occurred Sendmail exited ...

javascriptnode.jsemailexpressnpm

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

JavaScript - Modify the proposed content prior to inserting it into the input field

In my current project, I have implemented a feature using jQuery UI - v1.11.4, where an HTML textbox utilizes a JavaScript autocomplete functionality. The suggested string for the textbox is created by concatenating several columns (patient_no, patient_nam ...

javascriptjqueryhtmlautocomplete

Executing a Python script within an HTML page using Django and extracting a variable from an input form

I have created a sentiment analysis Python script, but now I want to integrate it with an HTML page. The goal is to take input from the HTML form, process it using the Python script, and then display the results back on the HTML page. Currently, I am usin ...

pythonhtmldjango

Node.js and MongoDB Login Form Integration with Mongoose

I am relatively new to web development and currently working on a simple web page for user login authentication. My goal is to verify user credentials (username & password) on the LoginPage from a mongoose database, and if they are correct, redirect them t ...

javascripthtmlnode.jsmongodbexpress

Mysterious additional spacing

I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...

htmlcss

The code is not executing properly in the javascript function

Hello there! I've created a basic login form with JavaScript validation, but for some reason, the code below isn't functioning properly. Here is my HTML and JS code: <head> <script type="text/javascript"> function ha ...

javascriptjqueryhtml

Tips for monitoring input content "live"

Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...

javascriptjqueryhtmlcss

Leveraging the power of HTML5 alongside Angularjs and Node/Express within the MEAN.js boilerplate framework

I've decided to kickstart my app using the mean.js () boilerplate because of its built-in authentication/authorization features. However, I've hit a roadblock when it comes to incorporating HTML5 into my project. In my Angular app, I've en ...

javascriptangularjsnode.jshtmlexpress