Adjust the width of this Responsive HTML Newsletter Template created by Charles Mudy

NOTE: You can download the template from https://github.com/charlesmudy/responsive-html-email-template

Although I am a fan of the template, I am encountering challenges when trying to adjust the width and ensure it responds correctly. I'm not sure why this is happening. There's a suggestion at the beginning that to change the widths, you should perform a find and replace with the following sizes:

wrapper   : '500',
columns   : '210',
x-columns : [
                left : '90',
                right: '350'
        ]

However, after changing the wrapper to 750, columns to 335 (half of 750 minus 80 for padding as done in 500/210), and x-columns to 142 and 448 respectively, things are not functioning as expected.

When I resize the browser, the template doesn't switch to one column until 480px, causing the right column to be partially hidden between 481-750px. Reverting back to the original sizes resolves the issue. I'm puzzled as to what I might be overlooking.

Answer №1

Make sure to also update your @media rule, which can be found on line 103 in the template.

While you are adjusting the widths and max-widths of the template, don't forget to consider the responsive design of the elements. Since you are increasing the size of all elements, you will need to adjust your breakpoint accordingly. Take a look at this resource on media queries for more information.

Here is a helpful JSFiddle demonstration.

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

Does clicking on a link open an iframe and automatically scroll to the top of the page?

Is there a way to make a link open a new page in an iframe and automatically redirect the webpage to the top of the screen? I'm hoping to achieve this using only HTML/CSS code. ...

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

Zooming on the page causes the absolute HTML layout to fall apart

I am still learning about HTML positioning. My go-to method is absolute positioning, like this: #div { position:absolute; left:50%; top:30%; } However, I have noticed that when I zoom in on the page using Google Chrome, the layout becomes broken. All ele ...

What is the best way to create space between table rows without using border-spacing?

I've been attempting to use the margin-bottom property on my table in order to separate the rows, but it doesn't seem to have any effect. I then tried using flex, which did work, but the table rows did not inherit the width and I had to specify a ...

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

It seems that Ionic 2 does not support the registration of custom HTML tags

Encountering a problem with Ionic 2 and custom components. Developed a component to show in a list, serving as the list item. However, my app crashes when attempting to use the custom HTML tag. The stack trace is provided below. Uncertain about the issue. ...

I am looking for a Ruby-based tool that can help me minify CSS

Searching for a CSS minifier that is compatible with Rails apps (not gziper) and doesn't require YUI compressor installation via command line. I'm developing a content management software where CSS is inputted into a textarea, then I need to mini ...

Overlapping text display in IE8 and Firefox

I am facing an issue with setting text-overflow to :text-overflow:ellipsis. The problem arises when the input text exceeds the length that I have specified, it does not show in ellipsis. Below is a snippet of the code: <td align="left" width="220px"> ...

What is the process for toggling the expansion and collapse of a table row (tr)?

Based on my previous experience (such as this example), I have observed that a div container can be easily toggled to hide and show. However, I am facing confusion when I have content inside a tr and I wish to display and hide certain items when that tr is ...

What is the best way to dynamically change the color of my component depending on the prop passed to it?

I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I ...

Unable to create scrolling functionality for the div in Bootstrap

I'm working with a code that includes a text input for users to enter information, along with a panel above the text input that displays what the user has typed. I want the height of the panel above the text field to be set so that it becomes scrollab ...

The transmission of form post-data is not successful

I encountered an error of 'undefined index' related to the 'shop' when trying to submit the form below. Surprisingly, after assigning a name to the submit button and testing its existence (isset), I received a negative response. Here&ap ...

Ensure that the final item in the flexbox is centered, rather than the initial one

Is there a way to align the last element in the center without affecting the first one? The code snippet below demonstrates how this can be achieved: .impress-profiles { .flex() //less mixin for flexbox flex-flow: row wrap; justify-content: c ...

CSS photo display with magnification feature

I currently have a functioning inner-zoomable image set up with the code provided. I am interested in converting this setup into an image gallery with zoom capabilities for the selected image element, but I'm unsure where to start. My objective is to ...

Guide to generating a consistent 16:9 preview of a different html page

I'm currently developing a simple webpage editor that allows users to create "slides" for later display elsewhere. For this purpose, I have designed the following layout: The left section serves as a preview while the right section functions as the ...

Enhancing the appearance of a selected checkbox in a React JS setting

I am attempting to apply the styles shown below in a React.js project, but I am unsure how to dynamically change the color based on a variable in React. Here is the code snippet: CSS: .toggle input:checked + .slider { background-color: ${color}; } Rea ...

Utilizing jquery for displaying and hiding notifications - Notyfy in action

Recently, I've started working with jQuery and have come across the useful Notyfy jQuery plugin. My goal is to display a notification bar with specific messages based on certain conditions such as success or error. I'm trying to achieve somethin ...

Distinguishing background colors depending on the browser's compatibility with CSS properties

I've successfully designed a polka dot background using pure CSS: .polka-gr{ background-image: radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0); background-size: 30px 30px; background-positio ...

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...