I'm trying to setup some links in an email and I'm having trouble getting them to display correctly.
<p style="display: block; text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</p>
They appear fine on desktop (side by side). On mobile I'd like them to stack but, as expected, they only take up 45% of the screen which is too small.
Since I can't reliably use media queries because of Gmail, is there any way to make them stack and appear at a reasonable width on mobile?
Thank you
Add a min-width to your anchor's, and since you re-style the p, use a div instead.
<div style="text-align: center;font-size: 20px;line-height:40px;width: 85%; margin: 0 auto;font-weight:300;margin-top:20px;">
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 0 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com"">Link One</a>
<a style="min-width: 300px; width: 45%; display: inline-block; background-color: #ebebeb; color: #333; text-decoration: none; margin: 10px; border-top:0; border-right: 1px; border-bottom: 1px; border-left: 0; border-color: #b8b8b8; border-style:solid;" href="http://example.com" >Link Two</a>
</div>
You can bring your code back to the past using tables. This technique is only reliable if it's just for an email.
<table width="500px">
<tbody>
<tr>
<td width="50%">Link one</td>
<td width="50%">Link two</td>
</tr>
</tbody>
</table>
Related
I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
I have a 2x4 table, which looks like this:
https://codepen.io/steph2020/pen/EQjyxr
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
}
table td:last-child {
border-bottom: 0;
}
}
#macroom{
color:#A52A2A;
font-size: 20px;
letter-spacing: 1px;
}
#slinky{
color:#000000;
font-size: 20px;
letter-spacing: 1px;
}
.brandImage1{
margin-top:15px;
margin-bottom:15px;
height:60px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.brandImage2{
height:60px;
width:150px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.locationIcon{
width:30px;
}
table, th, td {
background-color: #fff;
border-radius: 1px 1px 1px 1px;
overflow: hidden;
border-width: 1px;
border-color: #f4f4f4;
box-shadow: 6px 6px 18px 0 rgba(0,0,0,0.3);
text-align: center;
}
<table>
<thead>
<tr>
<th scope="col">
<a href="http://www.petessentials.ie/" target="_blank">
<img class="brandImage1" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg">
</a>
</th>
<th scope="col">
<a id="macroom" href="https://www.facebook.com/juliespetshop/" target="_blank">
<strong>Macroom Pet Shop</strong>
</a>
</th>
<th scope="col">
<a href="http://www.westcorkpetstore.net/" target="_blank">
<img class="brandImage2" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg">
</a>
</th>
<th scope="col">
<a id="slinky" href="https://www.goldenpages.ie/slinkys-pet-shop-mitchelstown/" target="_blank">
<strong>Slinkys Pet Shop</strong>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Pet Essentials">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Unit 9 Kilnagleary Business Park,</p>
<p>Carrigaline, Co. Cork</p>
</td>
<td data-label="Macroom Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>3 Main St Macroom</p>
<p>Co. Cork</p>
</td>
<td data-label="Potty Fish">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Bandon, Co. Cork</p>
</td>
<td data-label=" Slinkys Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Mitchelstown, Co. Cork</p>
</td>
</tr>
</tbody>
</table>
I am using data-label to replace the images in small screens. I want to have the images show up rather than the text in small screens. Now I am using text in data-label, How to use data-label to represent images instead?
It's currently not possible to do that in such dynamic way using that data-label technique.
What you can do is: add specific styles to each td index, with nth-of-type. That's odd, but should work.
I have been try to make an html and css lines to display user image, name, old file name, new file name and date.
My problem is when the whole content has the same length it will look good but if the username is longer or another other sting is longer it will deform the table and design please i need help.
Below is a sample image and jsfiddle link
Here is bad side
Here is my html code
<table>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">Ujah peter</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectarea</strong></span>
<span><strong>Newprojectarea</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
<tr class="treeFile">
<td>
<img src="Pictures/b78d7cd4555821042a70d9ec034b0dea.PNG" alt="Front" class="treeimage"/>
<span class="treposition" align="center">
<span class="treeSenderline"><span class="treeName">micheal grayer</span></span>
<span class="treeSenderXXX"></span>
</span>
</td>
<td width="1px"></td>
<td align="center">
<div class="treeMain">
<span class="fromtree"><strong>Mainprojectareaxxx</strong></span>
<span><strong>Newprojectlocation</strong></span>
<span class="treeBottomLine">10-28-2016</span>
</div>
</td>
</tr>
</table>
Here is css code
.treeBottomLine{
border-bottom: 2px solid #337ab7;
display: block;
margin-top: 0px;
width: 60%;
height: 20px;
text-align: center;
align-content: center;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
background-color: #fff;
}
.fromtree{
display: inline-block;
border-bottom: 2px solid #337ab7;
border-left: 2px solid #337ab7;
border-right: 2px solid #337ab7;
padding: 3px;
margin-right: 3em;
background-color: #fff;
}
.treeimage{
border-radius: 50%;
border: 2px solid #337ab7;
background-color: #fff;
margin: 5px;
margin-right: 1em;
width:30px;
height:30px;
}
.treeName{
border: 2px solid #337ab7;
background-color: #fff;
padding: 3px;
margin-left: 2em;
margin-right: auto;
text-align: center;
display: inline-block;
}
.treeSender{
border-top: 2px solid #337ab7;
width: 100%;
display: inline-block;
position: relative;
top: -2.6em;
left: 33px;
z-index: 0;
}
.treeSenderline{
display: inline-block;
position: relative;
left: 2.6em;
top: -2em;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #337ab7;
width: 100%;
height: 3px;
}
.treeMain{
position: relative;
}
Here is a link to https://jsfiddle.net/evr50w05/
I believe what you're looking for is to float the blue line to the left, and add a margin:
.treeMain {
float: left;
margin-left: 33px;
}
I've created a fiddle showcasing this here.
Hope this helps!
I'm working on an email template, so I'm limited with div, and CSS. Some email clients do not handle div and CSS. I have to use tables instead.
I have a td, in that td I need a title text with colored background at 100% width of td.
Here is my code, that is not working:
<td width="50%" valign="top" style="border: solid 2px #3c3141; border-width: 6px 2px 4px 0px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-left: none; background-color: #f1e4e7; margin: 0px; padding: 20px; text-align: center;">
<span style="background-color: #f5434f; color: #ffffff; padding: 10px; font-size: 16px; width: 100%;">
<strong>Termek nev</strong>
</span><br>
<span>
<br>ide jon a szoveg
</span>
</td>
You cannot specify a width for an inline element like span. Either use a block element like div or p or else force the span to display as a block using display:block as follows:
<td width="50%" valign="top" style="border: solid 2px #3c3141; border-width: 6px 2px 4px 0px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-left: none; background-color: #f1e4e7; margin: 0px; padding: 20px; text-align: center;">
<span style="background-color: #f5434f; color: #ffffff; padding: 10px; font-size: 16px; width: 100%; display:block">
<strong>Termek nev</strong>
</span><br>
<span>
<br>ide jon a szoveg
</span>
</td>
I have a menu that works on large screens but when the browser size is reduced in width (and the menu wraps) I can't get the menu items not to overlap each other.
HTML:
<div style="padding-top: 10px">
<a class="menu" style=
"border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#">Design
and Install</a><a class="menu" href="#">About this site</a><a class=
"menu" href="#">Products</a><a class="menu" href="#">F A Q</a><a class=
"menu" href="#">Portfolio</a><a class="menu" href="#">Contact</a>
</div>
CSS:
.menu {
font-family: Verdana;
font-size: 12px;
color: #000;
text-align: center;
text-decoration: none;
border: #B1B1B1 solid;
border-width: 0 1px 0 0;
padding: 10px 17px 10px 12px;
}
.menu:link,.menu:visited {
background-color: #E5E5E5;
}
.menu:hover,.menu:active {
background-color: #F9C232;
}
http://jsfiddle.net/9j77E/1/
Thanks if you can help.
Try adding display: inline-block; to .menu
.menu {
font-family:Verdana;
font-size: 12px;
color: #000000;
text-align: center;
text-decoration: none;
border: #B1B1B1 solid;
border-width: 0px 1px 0px 0px;
padding: 10px 17px 10px 12px;
display:inline-block;
}
display:inline-block; this property added and tested, please check.
Also if I'm too late you could also set line-height to 32. Because your font-size is 12px plus 2 times 10px padding.