I am trying to create an email template with HTML + CSS for GMAIL. It will be responsive!
But I know that "media queries" are not supported by gmail. So I am trying to create a "fluid layout" using old-fashioned HTML tags (table, td etc) and percentage instead of using CSS tags. I've already created a template (like here: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978) but still have a problem;
When I resize the browser I want -left column- to move at the bottom but now -right column- moves there.
How can I code so that left column will be at the bottom and the right one will be on the top of it. Is it possible to do it without using the "media queries" ?
Thanks,
This is can be caused by your tables being in the wrong order. Make sure the table with -left col- inside is placed underneath the -right col-. So long as the table wrapper is aligned to the left, it will still appear that way when viewed.
If that answer doesn't help, can you please provide a snippet of your HTML and I can take a look at what is causing the issue?
Related
The element I'm referring to is the offset box that is positioned above, to the left and below the main box.
Now creating this with regular HTML and CSS is super easy using absolute positioning and z-index.
However, in email HTML, where you're basically restricted to tables, I can't figure it out. Absolute positioning doesn't appear to be allowed. Most email clients strip it out. I'm not even sure if negative positioning is allowed.
How would you create this? Is it possible/worth even trying?
For email, you wouldn't use two 'cards' and overlay them like you would in web development. You can create this with tables and table cell really easily. See my pen here - codepen.io/Digital_Frankenstein/pen/GRJYOqd – Digital_Frankenstein
#digital_Frankenstein came up with a great solution.
Recently I've made a new Wordpress crew page for my team, this one. I'm using the visual composer plugin to put it all together. Unfortunately, the Wordpress theme adds a margin between the two sides that I cannot remove using visual composer. (see here)
After using inspect element in Safari I found the line that creates the margin (see here). After deleting the line it looks (like this).
My main question is: what is the best way to remove this margin? I'm afraid that jumping into the source code will mess up the website because the margin is part and connected to so many classes, maybe even on other pages?
Additional question: After deleting the margin in the inspector tool it creates white space on the right. I tried to find a specific page width or something similar but without success.
Thanks in advance!
You could create a Child Theme
Any code added to a child theme will not mess with the code of the original "Parent" theme. You can add your own stylesheet in it and override any styles you please, and they will carry over after any updates.
Use a plugin like Simple Custom CSS to inject your styles into the site.
You have to overwrite whole column grid. Try pasting this CSS code on "Custom CSS" field of your template or use plugin like "Cusom CSS"
.vc_col-xs-12, .vc_col-sm-6 {margin-left:0px!important;}
#media (min-width: 768px) {
body .vc_row-fluid .vc_col-sm-6 {width: 50%!important;}
}
If you know CSS, you should add ID to front page container and apply above CSS only to the front page. Otherwise it will take effect on whole website. It will remove margin between 1/2 columns.
Other way:
Try to make same arrangement of elements by using full width table instead of responsive columns - it will affect how website will look on mobile devices - but do you like how it looks now on mobile? ;)
I'm trying to style a list of content generated by Drupal Views. I can edit the HTML output of fields but have no access to the CSS. The content includes an image which needs floating/aligning to the left so that text flows around it. The original image files are a variety of sizes. The HTML I'm using for the image field is:
<img src="[image url]" width="220" height="auto" align="left" />
However, in some cases where images are longer than others, I get an overlapping effect like this:
What I want is for them all to display like this:
How can I do this?
Drupal provides by default feature of cropping/scaling images. There's no point of providing larger images and scaling them down or cropping them with CSS. That's waste of resources (bandwidth).
Go to Configuration -> Media -> Image styles (from admin menu) and define style you need. It's super easy - you just need to name your style and the pick effect you want (i.e. "Scale & crop"), set dimensions you need and save new style.
Then you should start using that style. If your page is generated by view the find and edit that view. Find that image field and set it to use your new style.
Other way is to force displaying of images in your style from template file directly. Find where image is printed and use:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
First parameter is style name, so put name of style you just created. Other parameter is URI (not path, as mentioned on that page!). Print out (print_r or var_dump whole image object you have in template file and see how can you access image URI. It should be something like:
$node->field_my_image['und'][0]['uri'])
So pass that as second parameter.
Even if you don't have access to the CSS you can still use CSS by adding style in your HTML tags.
As to your overlapping problems, assuming that you have a div that contains your images use can set that div's styleto style="overflow:hidden". You can also just give enough space to the div that contain your image.
Currently using http://backgrounds.cm method for background email generation. When not using the code, the email looks correct in most test. When the background image is added, Outlook 2013 will display it, but all the table formating expands to 100%. Not sure if I'm implementing it incorrectly.
Currently applying the background to the topmost table which contains several cells, not the entire body.
I've pasted the code here: http://pastebin.com/dX8zEZDV
I did a couple things to fix it:
Changed your doctype from strict to transitional.
Removed duplicate meta tags.
Closed all unclosed-tags (img and br tags).
Removed your outer two containing tables (#container_table and #container_wrapper).
In #container_table, removed min-width, added margin:0 auto and align="center" so table is centered.
In VML code section, replaced mso-width-percent:1000 to width:850px.
Updated closing VML tags to correct nesting order (closed prematurely).
Optional:
In VML code section, changed the color to better match your background (#292929).
The only instance I've found where VML background images and the inline fallbacks don't work is when I view my Outlook email using the Gmail app on Android. However, when I view my name#gmail.com email in the same app, it's fine. So in the event the background image doesn't load, the bgcolor will display so your users can still see your white text.
Note:
Always remember to validate your code. Even if there are some errors you can't fix (for instance the background attribute in the td won't validate), you can verify all your tags (minus any VML code) are nested/closed properly, as well as finding any accidental special characters you may have copied into your code from Photoshop or Word.
Updated source at jsfiddle: link
If table formatting expands to 100%, it's because you set "Table cell width" setting to "Full email width". It's best to use VML background images on fixed width and height table cells.
Ideal settings for backgrounds.cm are "A single table cell" and set width and height. Otherwise, the result might look different from non-Outlook clients (sometimes it's still OK if it's agreed upfront with stakeholders).
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.