In this tutorial, we’ll be editing the code in a Postcards template to increase the column width.
Prerequisites
- A Designmodo account
- Ability to edit HTML code
Video Version
Steps
1. Create and export a Postcards template
The main thing we need is a Postcards template for the HTML code.
In the Postcards app, create a template. Mine looks like this:
Next, we want to export this and use the HTML code that’s generated.
In the top right corner of the app, press “Export” and press “Download as zip”
There will be an option called “Host images online.” Make sure this option is checked. Your screen should look like this:
Press “Download Zip” and extract the file into a folder. My folder looks like this:
If you open this file in your browser, you should see the Postcards template you just created.
Now, we have everything we need to edit the code to increase the width of the columns.
It’s recommended that you make a copy of this file so you can edit the code and not worry about losing the original code.
2. Change the media query for “min-width”
Open your index.html file in a text editor. I’m using Notepad++ so my screen looks like:
The first line of code we need to change is the “media query” setting for “min-width.” This CSS setting changes the style for screen sizes that match its criteria.
The criteria we want to change is the “min-width: 621px” so search for this by pressing “control + f” or “command + f” and typing “min-width: 621px” like this image:
This line and the inner width setting is what we want to change. Change the value to whatever you want but for this tutorial, we’ll be increasing the width by 100px. Take note of the size difference between 621 and whatever you increase it to, you need to know this later.
My new media query looks like this:
Save this file and this step is done.
3. Change the width for the table element that wraps the entire template
We need to repeat the above step for the table that wraps the entire template. This table sets the size of all the other tables within it.
Scroll down until you reach the opening <body> tag and the 2nd <table> tag is where you want to edit the code.
It’s the 2nd <table> tag and not the 1st because the 1st tag doesn’t have a “max-width” attribute, only the 2nd one does.
Increase the “max-width” attribute here by the same amount as you did in the media query. My new <table> now looks like:
Make sure you also update the commented out <table> tag for Microsoft Office clients in the line just above the <table>.
Save the file and open it in your browser. The template should look 100px larger than the original.
4. Change the sections where there are 2 columns to fit the new width
Since our template’s width increased, the inner sections where there are 2 columns need to be updated. The sections with 1 column are fine because they’re centered but the 2 column sections are off.
The 2 sections in this template that need to be fixed are the Header and Footer sections.
To find the Header section, scroll down until you see “<!– BEGIN MODULE: Header 7 –>” like in this image:
Within this opening and closing comment is where all the code for the Header lies.
In the green commented code, go through each line and where the width is set to “600” update it to “700” or whatever your change was. This is to ensure that the updates work for Microsoft Office clients.
Next, if you scroll down to around line 323 in my template, you’ll see a <div> tag with a class of “pc-sm-mw-100pc” here is where the update needs to happen. Why here? Because this <div> is what sets the width with exact pixels like in this image:
The “max-width” in this <div> is set to “334px” and we need to increase it by 50px because 50px is half of 100px which is what we increased our media query and table width by.
Your new <div> should look like:
Once again, do the same thing for the commented out code above it, except this code isn’t a <div>, it’s a <td> that sets the width.
Scroll down until you see the 2nd <div> with the same class as “pc-sm-mw-100pc” and this is the 2nd column that needs to be updated.
Repeat the same process as above, increasing the <div> max-width by 50px, the commented out code above it by 50px, and also the <img> tag with width and height attributes by 50px.
Your code should now look like:
Save the file and open it in a browser.
Your template should now look something like:
As you can see, the two columns and image were increased by 50px in size to fit the 100px increase of the container.
5. Change the Footer to increase the size of the columns to match its container
Next, we want to repeat the same process for the Footer where there are two columns.
Once again, scroll down the file until you see “<!– BEGIN MODULE: Footer 1 –>” like here:
We want to repeat the same thing we did with the Header: find the <div> that sets the width, it’ll have the class “pc-sm-mw-100pc” like below:
Once again, increase the width of all the set widths by 50px, including the commented out code.
Repeat the same thing for the 2nd <div> under this one.
After that save your file and open it in the browser. You should see something like:
And there we have it, we have successfully increased the width of this template by 100px!
What we covered
- How to export a Postcards template.
- How to change the width value in the min-width media query.
- How to change the width value in the wrapping table element.
- How to update the width of columns in sections with 2 columns to match the change in the min-width and wrapping table.
- How to update the size of images to match the change in the columns.