I'm trying to make this landing page responsive: http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/blackfriday-BIG.html
But on mobile the image is now well over the width of the screen when it is in portrait, meaning you have to scroll to view the images and the form. I usually only do the coding for emails and I'm pretty much ripping out my hair at this point. Any help would be appreciated.
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css">
body { font-family: Helvetica,Arial,sans-serif }
div { border: none }
#outer { width: 100% }
#splashdiv { float: left }
#formdiv { float: left; height: 600px; background-color: #000000 }
#pelogo { padding-bottom: 1em }
.blackbg { background-color: #000000; text-align: center }
.centre { text-align: center }
#theform { display: inline-block; border: 2x solid #ff0000; padding: 1em auto 0px auto;
background-color: #ffffff; opacity: 1;
text-align: center }
#thetable { margin-top: 1.5em }
.prompt { text-align: right; padding: .4em .25em .4em 1em }
.response { text-align: left; padding: .4em 1em .4em .25em }
.gobutton { text-align: center; padding-top: 1em; padding-bottom: 1em }
.redsubmit { border: 1px solid #ff0080; border-radius: 8px; background-color: #ff0000;
padding: 2px .5em; color: #ffffff; font-weight: bold; font-size: 200% }
#media only screen and (max-width: 600px) {
img#beast {width: 100%; margin: 0; padding; 0;}}
Here are the other bits
<body>
<div id="outer">
<div id="splashdiv">
<img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/peep.png" width="690px" id="beast"/>
</div>
<div id="formdiv">
<div class="blackbg">
<div id="pelogo">
<img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/pebf_sq1.png" width="690px" id="beast"/>
</div>
<div>
<form id="theform" action="http://priceengines.co.uk/cgi-bin/signup" method="post" onsubmit="return check_form()">
<table id="thetable" border="0">
<tr>
<th class="prompt">Contact Name</th>
<td class="response"><input type="text" name="name" id="name" size="20" placeholder="Contact Name" /></td>
</tr>
<tr>
<th class="prompt">Company Name</th>
<td class="response"><input type="text" name="compname" id="compname" size="20" placeholder="Company Name" /></td>
</tr>
<tr>
<th class="prompt">Contact Number</th>
<td class="response"><input type="tel" name="tel" id="tel" size="20" placeholder="Contact Number" /></td>
</tr>
<tr>
<th class="prompt">E-Mail Address</th>
<td class="response"><input type="email" name="email" id="email" size="20" placeholder="E-mail" /></td>
</tr>
<tr>
<td colspan="2" class="gobutton"><input class="redsubmit" type="submit" name="go" value="Get FREE leads!" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
Theming emails is always a pain in the ass.
But you can try to add a max-width to your email container. I usually set mine on 600px.
Also try to use breakpoints to make it responsive. And you can give the img a max-width:100%or to any value you like.
add max-width: 100% to the img
Related
I am using JavaMail API for sending mail. In my mail, I have to attach HTML content.
I am using the following code to prepare HTML.
<html>
<head>
<style>
input[type=text],
select,
textarea {
padding: 12px 30px;
margin: px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: white;
color: black;
font-size: 75%;
}
input[type=text],
select .longText {
width: 100%;
}
textarea.longText {}
.processDetails {
background-color: #f2f2f2;
width: 80%;
}
div {
border-radius: 5px;
padding: 20px;
}
textarea#description {
margin-left: 4%;
}
.center {
margin: auto;
width: 50%;
box-sizing: border-box;
border-radius: 4px;
padding: 0;
text-align: center;
margin-top: 6px;
}
label {
margin-left: 5%;
color: blue
}
#centerBody {
margin: auto;
width: 100%;
box-sizing: border-box;
border-radius: 4px;
padding: 0;
text-align: center;
margin-top: 6px;
}
</style>
</head>
<body>
<div class="processDetails">
<div class="center">
<table>
<tr>
<td width="40%">
<label for="process"> Name</label>
</td>
<td width="60%">
<input type="text" class="longText" value=DSDS disabled>
</td>
</tr>
</table>
</div>
<div class="centerBody">
<table id="processTable">
<tr>
<td width="20%">
<label for="processProperties">Code</label>
</td>
<td width="28%">
<input type="text" value=TAWELC disabled>
</td>
<td width="20%">
<label for="processProperties">City</label>
</td>
<td width="28%">
<input type="text" value=Lucknow disabled>
</td>
</tr>
<tr>
<td width="20%">
<label for="processProperties">Organisation</label>
</td>
<td width="28%">
<input type="text" value=HR disabled>
</td>
<td width="20%">
<label for="processProperties">Email</label>
</td>
<td width="28%">
<input type="text" value=vishal.something#gmail.com disabled>
</td>
</tr>
</table>
<table>
<tr>
<td width="19%">
<label for="description">Adress</label>
</td>
<td width=68%>
<textarea class="longText" cols=65% style="height:50px;margin-left: 5%;resize: none; position: fixed;" disabled>asd</textarea>
</td>
<td width=24%></td>
</tr>
</table>
</div>
</div>
</body>
</html>
When I sent this as a mail body, I found that the behavior of the HTML content is not the same in Browser and Outlook Applications.
I can see text area alignment differences when I open mail in the Microsoft outlook application.
Please let me know what is wrong here or how can I fix the issue.
Regards,
Vishal
I have a piece of CSS I am working with. Whenever I add the "display: flex" property to .student, the border suddenly doubles. I need the flex property because I want the text to be centered vertically next to the image inside of the .student table data cell. How can I get rid of this pesky double border? The double border goes away whenever I remove the display:flex property, but then the text is no longer vertically next to the image. I've tried whitespace, border collapse, and several others without any luck.
Codepin: https://codepen.io/dansbyt/pen/dyvoejG?editors=1100
CSS:
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px; left: 0;
width: 100vw; height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;}
/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}
/* Table heading styling */
thead th {
height: 60px; width: 100px;
top: 0; z-index: 2;
position: -webkit-sticky; position: sticky;
border-right: 1px solid gray;
background-color: white;}
thead th:first-child {left: 0; z-index: 10;}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray}
table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
background-color: white}
td.late{background-color: #EA5D6B}
td input {
text-align: center;
padding: 4px; margin: 0;
width: 114px;
border: none;}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
.pic img{display: none}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px; left: 0;
width: 100vw; height: 56px;
border-top: 1px solid #DDDDDD}
HTML:
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
Image of issue:
Instead of using border: 1px solid gray you can try this.
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
/* ------------{GRADEBOOK}------------ */
.gradebook {
position: absolute;
top: 60px;
left: 0;
width: 100vw;
height: calc(100vh - 126px);
overflow-y: scroll;
box-sizing: border-box;
}
/* Table styling*/
table {
table-layout: fixed;
border-collapse: collapse;
}
/* Table heading styling */
thead th {
height: 60px;
width: 100px;
top: 0;
z-index: 2;
position: -webkit-sticky;
position: sticky;
border-right: 1px solid gray;
background-color: white;
}
thead th:first-child {
left: 0;
z-index: 10;
}
th {
padding: 10px 16px;
text-align: left;
font-weight: normal;
color: gray
}
table .duedate {
font-size: 14px;
margin-bottom: 8px
}
table .title {
font-size: 18px;
color: #5B7042
}
/* Table data styling */
td {
text-align: center;
border: 1px solid gray;
border-bottom: 0;
border-right: 0;
background-color: white
}
tr:last-of-type td {
border-bottom: 1px solid gray;
}
td:last-of-type {
border-right: 1px solid gray;
}
td.late {
background-color: #EA5D6B
}
td input {
text-align: center;
padding: 4px;
margin: 0;
width: 114px;
border: none;
}
/* Student Name styling */
.student {
padding: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: -1px;
}
.pic {
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;
}
.pic img {
display: none
}
/* ------------{CONTROLS}------------ */
.controls {
display: flex;
position: absolute;
bottom: 10px;
left: 0;
width: 100vw;
height: 56px;
border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">
<div class='gradebook'>
<table>
<thead>
<tr>
<th style='width: 200px'></th>
<th>
<div class='duedate'>Due Oct 08</div>
<div class='title'>Mayflower Vocabulary</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>Wax Museum</div>
</th>
<th>
<div class='duedate'>Due Oct 15</div>
<div class='title'>American Revolution</div>
</th>
<th>
<div class='duedate'>Due Oct 27</div>
<div class='title'>Jamestown</div>
</th>
<th>
<div class='duedate'>Due Nov 1</div>
<div class='title'>Comparing Colonies</div>
</th>
</tr>
</thead>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>Jane Doe</span>
</td>
<td><input type='text' value='-'></td>
<td class='late'><input type='text' value='10'></td>
<td><input type='text' value='9.5'></td>
<td><input type='text' value='10'></td>
<td><input type='text' value='5'></td>
</tr>
<tr>
<td class='student'>
<img class='pic' src='../pics/default.png'>
<span>John Doe</span>
</td>
<td><input type='text' value='-'></td>
<td><input type='text' value='8'></td>
<td><input type='text' value='9'></td>
<td><input type='text' value='10'></td>
<td class='late'><input type='text' value='9'></td>
</tr>
</table>
</div>
<div class='controls'>
</div>
My assumption is that problem arises from clashing between two layout alghorithms, table and flex one. Td belongs to table one and putting flex there just make problems.
So only solution is to wrap td content with div, and put flex onto that div.
table{
border-collapse: collapse;
}
td{
border: 1px solid;
}
.flex{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<th>flex</th>
<th>flex</th>
<tr>
<td class='flex'>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td class='flex'>...</td>
</tr>
</table>
<table>
<th>div flex</th>
<th>div flex</th>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
<tr>
<td> <div class='flex'>...</div></td>
<td> <div class='flex'>...</div></td>
</tr>
</table>
</body>
</html>
This is one of the weirdest things I've seen,
I have a form inside a table cell, which contains hidden inputs.
I've noticed that in IE7, once there are more than 1 hidden inputs, the cell expands.
Here's a screenshot (says three but also two) :
This is the HTML:
<table border="1" class="fix">
<col style="width:150px;" />
<col style="width:200px;" />
<col style="width:200px;" />
<col style="width:200px;" />
<col style="width:190px;" />
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"><form action="a.php" method="GET">
<input name="a" type="hidden" value="1"/>
<input name="b" type="hidden" value="2"/>
<div class="button-zone"><input type="submit" class="button" value="ABCDEF GEHIJKLM"></div></form></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>
Once I delete the input b line (Which i need), the cell looks normal.
Here's the CSS:
table.fix {
table-layout: fixed;
}
table.fix td {
overflow: hidden;
}
td {
padding: .31em 1em 2em 1em;
text-align: left;
}
.cell {
background-color: gray;
padding-bottom: 12px;
padding-left: .44em;
}
.button-zone {
float: left;
margin-left: 0px;
position: relative;
}
.button {
background-color: yellow;
font-family: Arial;
font-weight: bold;
color: black;
border: 0;
overflow: visible;
font-size: 16px;
padding: 4px 20px 4px 8px;
}
This happens on IE7, any way to fix this without modifying sizes?
You can set CSS like this :
input[type="hidden"]{
height:0;
}
I have this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='js/knockout-3.0.0.js'></script>
<script type='text/javascript' src='js/myTasks.js'></script>
<link rel="stylesheet" type="text/css" href="css/walk.css">
<TITLE>Your Tasks</TITLE>
</HEAD>
<BODY>
<div class="screenSection">
<div class="sectionHeader">
<p>Your Tasks</p>
</div>
<div class="lines">
<table class="dataTable" id="CADataTable">
<thead>
<tr>
<th style="width: 15em;"> Project name</th>
<th style="width: 7em;"> Number</th>
<th style="width: 50em;"> description</th>
<th style="width: 5em;"></th>
</tr>
</thead>
<tbody data-bind="foreach: Assimilation">
<tr>
<td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
<td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
<td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
<td style="width: 5em;">
<img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation">
</td>
</tr>
</tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newAssimilation">Add new row</button>
</div>
</div>
</BODY>
</HTML>
Now everything is ok, but when I press the add new row button, I'm getting this ugly thing:
I'm using this css:
#CHARSET "UTF-8";
.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label {
display: block;
font-size: 1.7em;
margin: 0.8em 0 0.1em 0.15em;
width: 17.89em;
}
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 22px; width: 250px }
fileSelection { width: 50em; height: 30px; }
input:focus,textarea:focus,select:focus{
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff; outline: none; }
td
{
background: #A9D0F5;
text-align: center;
height:2em;
}
th
{
height:2em;
}
.trClass
{
height:2em;
white-space: nowrap;
}
table
{
width: 98%;
font-size: 1.2em;
clear: both;
}
What I'm trying to do is to remove the blue space.
I'm 1000% sure that I'm making a small mistake somewhere, but it is my first css try. I'm a backend developer and it is really hard for me to spot any non sense things in the code. Please help me!
EDIT:
JSFIDDLE
Try this fiddle http://jsfiddle.net/37sbw/5/
you need to remove the
background: #A9D0F5;
applied for td
keep it like this
td
{
//background: #A9D0F5;
text-align: center;
height:2em;
}
I have even added
cellspacing="0px"
to the table to remove the spacing between the cells.
If cellspacing is not applied then go for this
table
{
border-spacing:0px;
}
Make Cell Spacing & Cell Padding as 0px
I am guessing you mean that the input field doesn't take up all the parent's width.
You have specified inline-style. This will override the CSS you've put in a seperate sheet.
<td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
<td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
<td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
<td style="width: 5em;">
<img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation">
</td>
Get rid of all the occurences of style="" and it should work as you expect it to work.
Additionally, change your CSS to this:
input[type="text"] {width: 100%;}
Set border-spacing of your table to 0:
table {
width: 98%;
font-size: 1.2em;
clear: both;
border-spacing: 0;
}
This will get rid of your white space between the cells.
jsFiddle
I can't find any relevant CSS padding, margins, etc. causing this empty space.
The main page has a middle bar(testimonials) portion that when removed for the sub pages still leaves a noticeable empty space. The elements below are positioned relatively in two columns but they're moving up pushing up.
Main page
http://teetime.comeze.com/
Sub page example:
http://teetime.comeze.com/pestcontrol.html
Relevant CSS:
.container {
width: 1030px;
margin: 0 auto;
z-index: 2;
}
.header {
}
.content {
z-index: 3;
margin: 1px;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
padding-left: 0;
}
#apDiv5 {
position: absolute;
width: 942px;
height: 322px;
z-index: 1;
clear: both;
}
.column1 {
height: 700px;
width: 490px;
float: left;
margin-left: 25px;
position: relative;
padding-top: 17px;
}
.column2 {
height: 700px;
width: 480px;
float: left;
margin-left: 10px;
position: relative;
padding-top: 20px;
border: none;
}
.form {
font-family: kreon;
line-height: normal;
height: 363px;
width: 293px;
/* [disabled]padding-left: 600px; */
font-size: 100%;
z-index: 100;
text-indent: 0px;
padding-top: 0px;
color: #700CAF;
text-align: left;
letter-spacing: 1.4px;
background-image: url(teetimefinal.png);
#mail {
left: 600px;
position: relative;
}
Here is html code (from end of header to start of the two columns):
<div class="content">
<div id="apDiv5"><img src="mole.png" width="902" height="320" alt="mole"></div>
<form action="form-to-email.php" method="post" enctype="application/x-www-form-urlencoded" target="_self" class="form" id="mail" title="mail">
<h2><br>
Free Estimate</h2><table width="234" border="0" cellpadding="3" cellspacing="3" summary="form">
<tr>
<th scope="row"> <label>Name
<input name="Name" type="text" class="space" id="Name">
<br>
</label> </th>
</tr>
<tr>
<th scope="row"> <label>Email
<input name="Email" type="text" class="space" id="Email">
<br>
</label> </th>
</tr>
<tr>
<th scope="row"> <label>Street
<input name="Street" type="text" class="space" id="Street">
<br>
</label> </th>
</tr>
<tr>
<th scope="row"> <label>Phone
<input name="Phone" type="text" class="space" id="Phone">
<br>
</label> </th>
</tr>
<tr>
<th scope="row"> <label>Zip
<input name="zip" type="text" class="space" id="zip">
<br>
</label> </th>
</tr>
<tr>
<td scope="row"> <div align="center">
<input type="submit" class="sub1" id="Sub" style="button" value="Submit">
</div></td>
</tr>
</table>
</form>
<div class= "column1"><img src="/writing.png" width="493" height="653" alt="writing">
<div id="apDiv14">
<h3>Seven-Step Fertilization Program<br>
The free estimate widget on the right hand side has a set height on line 147 of index.css
Just reduce this to remove the extra space.
Like Drawdesign mentioned, it looks like you're declaring a set height on .form in your index.css file. Alter that height, and you'll alter that gap.