images inside table in CSS , HTML - html

When I open the page in the half screen it appears like this
but when I open it full Screen it appears like this
I tried adding min and max-width but I can't figure out where is the problem
.Price {
font-size: 10pt;
}
.infoS {
background-color: #da9b48;
color: rgb(31, 22, 5);
padding: 3px;
width: 90%;
margin: 0 auto;
margin-top: 15px;
padding-left: 45px;
}
.Pinfo {
font-size: 7pt;
}
<table>
<td class="infoS">
<p class="Pinfo">
PIXMA G640
</p>
<img src="./images/PIXMA G640.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 150$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA TS7440
</p>
<img src="./images/PIXMA TS7440.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 250$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 170$
</p>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 120$
</p>
</td>
</tr>
</table>

**Your code is also missing a closing tr and a missing td tag.
For the solution, I would suggest you to use 'display: inline-flex' and justify-content: space-evenly for this case.
.Price {
font-size: 10pt;
}
.infoS {
background-color: #da9b48;
color: rgb(31, 22, 5);
padding: 3px;
width: 90%;
margin: 0 auto;
margin-top: 15px;
padding-left: 45px;
}
.Pinfo {
font-size: 7pt;
}
tr.row {
width: 100vw;
display: inline-flex;
justify-content: space-evenly;
}
<table>
<tr class="row">
<td class="infoS">
<p class="Pinfo">
PIXMA G640
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 150$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA TS7440
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 250$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 170$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 120$
</p>
</td>
</tr>
</table>
Working Fiddle

Related

why my Div and Style is not woking in email template?

Here is the link for the code:
https://codepen.io/yahyajapan/pen/bGgyONX
While I was trying to create a mail template I code an internal CSS while did not work.
Then I was about known that I have to code inline styling, in the above code I also started converting internal CSS into inline CSS but what I get is when I send mail, it does not show my divs and styles which does not give me the desired result. Can anyone please help me with this code?
You can look for the desired result by running the above code.
<center class="wrapper" style=" width: 100%;
table-layout: fixed;
background-color: #f6f9fc;
padding: 40px 0;">
<div class="webkit" style=" max-width: 600px;
background-color: white;">
<table class="outer" align="center" style="margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;">
<tr>
<td style="padding: 0;">
<table style="width: 100%; border-spacing: 0; border-spacing: 0;">
<tr>
<td style="padding: 0;">
<div class="email-temp-1">
<!-- <img src="./assets/email1_graphics/email1_graphics/em1_background.png" alt=""> -->
<div class="email-temp-1-body">
<div class="logo-BG">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_header.png" alt="">
<div class="email-temp-1-logo">
<a href="https://kempslunicko.cz/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_logo.png" alt="">
</a>
</div>
<div class="upper-title">
<p>Rezervační číslo: 11</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_fcb.png" alt="">
</a>
<a href="https://www.instagram.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_inst.png" alt="">
</a>
<a href="https://wa.me/0420737935777" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_whatsup.png" alt="">
</a>
</div>
</div>
<div class="container">
<div class="em1-mid-heading">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_confirm.png" alt="">
<div>
<h4 style="font-family: oswald-light;">VAŠE REZERVACE BYLA PŘIJATA</h4>
<p style="font-family: oswald-regular; font-size: 12px;">Děkujeme pane/paní Jméno Příjmení <br> za Váš zájem o
pobyt v Kempu Sluníčko.</p>
</div>
</div>
<div class="em1-mid-content" style="display: flex;
justify-content: space-between;
margin-top: 4%;">
<div class="">
<p style="font-family: oswald-bold;">Datum příjezdu: <span>02.07.2021</span></p>
<p style="font-family: oswald-bold; margin-bottom: 1rem;">Datum odjezdu: <span>06.07.2021</span></p>
<p style="font-family: oswald-regular;">Ubytování: Chatka Sluníčko</p>
<p style="font-family: oswald-regular;">Rezervované chatky: 21, 22, 23, 24</p>
<p style="font-family: oswald-regular;">Počet dospělých: 5</p>
<p style="font-family: oswald-regular;">Počet dětí (pod 12 let): 6</p>
<p style="font-family: oswald-regular;">Sleva na ubytování: -10%</p>
</div>
<div class="em1-mid-content-img">
<div>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_photos.png" alt="">
</div>
</div>
</div>
<div class="em1-lower-heading" style="margin-top:2rem;">
<p style="font-family: oswald-bold; font-size: 13px;">Celková částka včetně slevy: <span>11 331 CZK</span></p>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_underline.png" alt="">
</div>
<div class="em1-lower-content" style="padding-top: 1rem;">
<p style="font-family: nunito; font-size: 10px;">K dokončení rezervace prosím uhraďte rezervační zálohu</p>
<p style="font-family: nunito; font-size: 10px;"><span style="font-size: 13px;">5 665,5 CZK</span> na číslo bankovního účtu
<span style="font-size: 13px;">2501946055/2010</span> (fio banka)
</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;"><span style="font-size: 13px;">s variabilním číslem: 10</span>, a s
příjmením rezervující osoby v poznámce platby.</p>
<p style="font-family: nunito; font-size: 10px;">Neuhrazením do 5 pracovních dnů tato rezervace propadá.</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;">Doplatek <span style="font-size: 13px;">5 665,5 CZK</span> bude
proveden v hotovosti na recepci při příjezdu.</p>
<p style="font-family: oswald-light; font-size: 12px;">V případě dotazů nás kontakujte.</p>
<p style="font-family: oswald-regular; color: #24b99b; margin-top:2rem;">Těšíme se na Vás!</p>
</div>
</div>
</div>
<div style="position: absolute;
bottom: 0;
left: 0;
right: auto;">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_footer.png" alt="">
<p style="font-family: oswald-bold;
position: absolute;
bottom: 5%;
left: 2%;
right: auto;
color: #3b0900;
font-size: 13px;">
KEMP SLUNÍČKO <span style="font-size: 8px;">737 935 777,
www.kempslunicko.cz info#kempslunicko.cz</span></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
Don't struggle with custom css and html for different email clients (each will treat your code differently). Find free or paid email template creator and use it.

Prevent Images From Overlapping Border From a Table?

I am currently testing out how to create a newsletter. I have made a template. I am also very new to designing. I have made a table of album releases however, it is not fitting within the border I created. How can I fix this?
I have added the code here.
Also, I want to note that I am adding the CSS into the html so a specific newsletter website can accept the newsletter. Although I was taught the other way where I create both a separate html and css file, this is how it has to be for now.
<!DOCTYPE html>
<html>
<head>
<title>NewsLetter Template</title>
<style type="text/css" >
body {
border: 5px solid #ffff;
max-width: 700px;
padding: 20px;
width: 80%;
margin: 20px auto;
}
.img1 {
width: 100%;
height:auto;
position: relative
}
.img2 {
width: 50px;
height: 50px;
position: relative
}
h2 {
background-color: red;
text-align:"center";
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.performance {
width: 250px;
}
p {
font-family: Helvetica;
font-size: 20px;
color: black;
}
.performancetype {
font-size: 20px;
font-family: Helvetica;
}
h3 {
font-family: Helvetica;
font-weight: 500;
}
table {
display:inline-block;
width:"100%";
}
</style>
</head>
<body>
<!-- Header -->
<div style="min-height: 100vh; position: relative; border: 5px red solid; text-align: center;">
<a href="http://www.google.com">
<img class="img1" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="Sample"/></a>
<div>
<!-- Icons -->
<tr>
<td align="center">
<a href="http://www.google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Facebook" border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Twitter"border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="YouTube" border="0"/>
</a>
</td>
</tr>
</div>
<br></br>
<div>
<h2>Check Out New Releases In The Following Categories</h2>
</div>
<!-- NEW RELEASE CATEGORIES -->
<!-- BEGIN UPCOMING INSTORE//-->
<h2>Upcoming Instore Events</h2>
<!-- BEGIN IN STORE -->
<!-- PERFORMER IMAGE -->
<div>
<h2> Breakout Specials & Releases </h2>
</div>
<table>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYLP"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER LP" title="LOVELYTHEBAND - FINDING IT PREORDER LP" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER LP</h4>
<p>[ LP ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYCD"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER CD" title="LOVELYTHEBAND - FINDING IT PREORDER CD" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER CD</h4>
<p>[ CD ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/602567572039"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/beatles-250x250.jpg"
alt="BEATLES - YELLOW SUBMARINE (PIC DISC)" title="BEATLES - YELLOW SUBMARINE (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>BEATLES</h4>
<h4>YELLOW SUBMARINE (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Limited edition 7-inch vinyl picture disc now available!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/896308002842"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0619/clutch-250x250.JPG"
alt="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" title="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>CLUTCH</h4>
<h4>HOW TO SHAKE HANDS (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Picture disc now available!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/840588116126"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/devil-250x250.jpg"
alt="DEVILDRIVER - OUTLAWS TIL THE END V.1" title="DEVILDRIVER - OUTLAWS TIL THE END V.1" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVILDRIVER</h4>
<h4>OUTLAWS TIL THE END V.1</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758510026"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/townsend-250x250.jpg"
alt="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" title="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVIN TOWNSEND</h4>
<h4>OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/724596973523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/goldfrapp-250x250.jpg"
alt="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" title="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>GOLDFRAPP</h4>
<h4>SILVER EYE (2CD/DELUXE)</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361445225"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" title="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS (WHITE/BLACK)</h4>
<p>[ LP ] Indie exclusive black and white colored vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361322021"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS" title="IMMORTAL - NORTHERN CHAOS GODS" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190296955600"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/marr-250x250.jpg"
alt="JOHNNY MARR - CALL THE COMET (PURPLE)" title="JOHNNY MARR - CALL THE COMET (PURPLE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>JOHNNY MARR</h4>
<h4>CALL THE COMET (PURPLE)</h4>
<p>[ LP ] Indie exclusive purple vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758588728"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/lucifer-250x250.jpg"
alt="LUCIFER - LUCIFER II" title="LUCIFER - LUCIFER II" class="img-responsive" /></a></div>
<div class="caption">
<h4>LUCIFER</h4>
<h4>LUCIFER II</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/405053840102"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/perfect-250x250.jpg"
alt="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" title="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>PERFECT CIRCLE</h4>
<h4>EAT THE ELEPHANT (RED/BLUE)</h4>
<p>[ LP ] Red and blue vinyl LP pressing!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/607618211523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/murphy-250x250.jpg"
alt="PETER MURPHY - 5 ALBUMS" title="PETER MURPHY - 5 ALBUMS" class="img-responsive" /></a></div>
<div class="caption">
<h4>PETER MURPHY</h4>
<h4>5 ALBUMS</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/4050538388558"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/tiger-250x250.jpg"
alt="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" title="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" class="img-responsive" /></a></div>
<div class="caption">
<h4>TIGER ARMY</h4>
<h4>DARK PARADISE (COLORED VINYL W/DL)</h4>
<p>[ New 7 inch Vinyl ] </p>
</div>
</td>
</tr>
</body>
</html>
When you run it, the new releases look like this
Screenshot
What should I do?
Thanks in advance.
Let the images have dynamic sizing:
.img-responsive{
width: 100%;
height: auto;
}
They'll fill the <td>'s width 100% (and no more) and the height will be dynamically sized to retain the original aspect ratio. This is useful for rectangular images such as the Yellow Submarine album in your example.
Apply width: 100% to those images which are inside table cells. This will fit them exactly into the table cells, no matter how large they are:
td img {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>NewsLetter Template</title>
<style type="text/css" >
body {
border: 5px solid #ffff;
max-width: 700px;
padding: 20px;
width: 80%;
margin: 20px auto;
}
.img1 {
width: 100%;
height:auto;
position: relative
}
.img2 {
width: 50px;
height: 50px;
position: relative
}
h2 {
background-color: red;
text-align:"center";
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.performance {
width: 250px;
}
p {
font-family: Helvetica;
font-size: 20px;
color: black;
}
.performancetype {
font-size: 20px;
font-family: Helvetica;
}
h3 {
font-family: Helvetica;
font-weight: 500;
}
table {
display:inline-block;
width:"100%";
}
</style>
</head>
<body>
<!-- Header -->
<div style="min-height: 100vh; position: relative; border: 5px red solid; text-align: center;">
<a href="http://www.google.com">
<img class="img1" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="Sample"/></a>
<div>
<!-- Icons -->
<tr>
<td align="center">
<a href="http://www.google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Facebook" border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Twitter"border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="YouTube" border="0"/>
</a>
</td>
</tr>
</div>
<br></br>
<div>
<h2>Check Out New Releases In The Following Categories</h2>
</div>
<!-- NEW RELEASE CATEGORIES -->
<!-- BEGIN UPCOMING INSTORE//-->
<h2>Upcoming Instore Events</h2>
<!-- BEGIN IN STORE -->
<!-- PERFORMER IMAGE -->
<div>
<h2> Breakout Specials & Releases </h2>
</div>
<table>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYLP"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER LP" title="LOVELYTHEBAND - FINDING IT PREORDER LP" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER LP</h4>
<p>[ LP ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYCD"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER CD" title="LOVELYTHEBAND - FINDING IT PREORDER CD" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER CD</h4>
<p>[ CD ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/602567572039"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/beatles-250x250.jpg"
alt="BEATLES - YELLOW SUBMARINE (PIC DISC)" title="BEATLES - YELLOW SUBMARINE (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>BEATLES</h4>
<h4>YELLOW SUBMARINE (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Limited edition 7-inch vinyl picture disc now available!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/896308002842"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0619/clutch-250x250.JPG"
alt="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" title="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>CLUTCH</h4>
<h4>HOW TO SHAKE HANDS (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Picture disc now available!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/840588116126"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/devil-250x250.jpg"
alt="DEVILDRIVER - OUTLAWS TIL THE END V.1" title="DEVILDRIVER - OUTLAWS TIL THE END V.1" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVILDRIVER</h4>
<h4>OUTLAWS TIL THE END V.1</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758510026"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/townsend-250x250.jpg"
alt="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" title="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVIN TOWNSEND</h4>
<h4>OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/724596973523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/goldfrapp-250x250.jpg"
alt="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" title="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>GOLDFRAPP</h4>
<h4>SILVER EYE (2CD/DELUXE)</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361445225"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" title="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS (WHITE/BLACK)</h4>
<p>[ LP ] Indie exclusive black and white colored vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361322021"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS" title="IMMORTAL - NORTHERN CHAOS GODS" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190296955600"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/marr-250x250.jpg"
alt="JOHNNY MARR - CALL THE COMET (PURPLE)" title="JOHNNY MARR - CALL THE COMET (PURPLE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>JOHNNY MARR</h4>
<h4>CALL THE COMET (PURPLE)</h4>
<p>[ LP ] Indie exclusive purple vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758588728"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/lucifer-250x250.jpg"
alt="LUCIFER - LUCIFER II" title="LUCIFER - LUCIFER II" class="img-responsive" /></a></div>
<div class="caption">
<h4>LUCIFER</h4>
<h4>LUCIFER II</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/405053840102"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/perfect-250x250.jpg"
alt="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" title="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>PERFECT CIRCLE</h4>
<h4>EAT THE ELEPHANT (RED/BLUE)</h4>
<p>[ LP ] Red and blue vinyl LP pressing!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/607618211523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/murphy-250x250.jpg"
alt="PETER MURPHY - 5 ALBUMS" title="PETER MURPHY - 5 ALBUMS" class="img-responsive" /></a></div>
<div class="caption">
<h4>PETER MURPHY</h4>
<h4>5 ALBUMS</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/4050538388558"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/tiger-250x250.jpg"
alt="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" title="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" class="img-responsive" /></a></div>
<div class="caption">
<h4>TIGER ARMY</h4>
<h4>DARK PARADISE (COLORED VINYL W/DL)</h4>
<p>[ New 7 inch Vinyl ] </p>
</div>
</td>
</tr>
</body>
</html>

How to horizontally scroll the contents in mobile/tablet view in html/css?

I have a fiddle which I have replicated by seeing the screenshot below:
The CSS code which I have used for the individual square box item is:
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
Problem Statement:
Now in the mobile view, I want the items in the screenshot to horizontally scroll in the mobile/tablet view without any change in size of an item. In order to do that, I have used the following CSS code but it doesn't seem to work.
#media only screen and (max-width: 767px)
.product-all-contents {
overflow-x: auto;
white-space: nowrap;
}
I am wondering what changes I should make in the fiddle so that the whole screenshot scroll in the mobile/tablet view.
You're on the right tracks, but you can't use white-space: nowrap in this instance, since using that method is reserved for when you're using the inline-block method of creating a horizontal scroll. There is a flexbox property though called flex-wrap which when we set to nowrap it does a similar thing.
See updated fiddle: https://jsfiddle.net/utmyu5r6/4/
The main problem is that the items and their parents have a dinamic width. Items being on 10% and its parent to 70%.
I would recommend using the next style inside your media query. You can adapt this rule to different breakpoints as you need.
.product-contents .product{
min-width: 25%;
max-width: 25%;
margin: 0 2%;
}
I had to remove all of the JS and some HTML to make the snippet work. Your code hit the max of SO.
Hope this helps :>
.product-all-contents{
background-color: #f0f0f0;
width: 70%;
margin: auto;
}
.product-contents {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
.ipads {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.franchise-hub-text, .cloud-based-text, .business-analytics-text, .tech-support-text, .order-management-text, .employee-management-text, .white-label-text,
.brand-label-text, .lead-tracking-text, .custom-invoicing-text, .goal-setting-text, .customization-tools-text, .royalty-calculator-text, .email-marketing-text
{
width: 50%;
}
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}
.product-quotes
{
display: block;
padding: 20px 11px;
width: 90%;
color:#3b3b3d;
background: white;
border-radius: 2px;
line-height: 1.625;
font-family: 'Roboto';
font-weight: normal;"
}
.arrow-down {
width: 0;
height: 0;
margin: auto;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #f0f0f0;
}
.white
{
display: none;
}
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 25%;
max-width: 25%;
margin: 0 2%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing</title>
<link rel="stylesheet" href="sample.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</head>
<body>
<div class="product-all-contents">
<div class="product-contents">
<div class="product" id="franchisehub">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/franchise-hub-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
color: rgb(58, 59, 60);">Franchise Hub</p>
</div>
<div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">
<img class="black" style="display:none;" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
<img class="white" style="display:inline-block;" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/cloud-based-mobile-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 27%;
color:white;">Cloud Based & Mobile</p>
</div>
<div class="product" id="businessanalytics">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/business-analytics-white.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">Business Analytics</p>
</div>
<div class="product" id="techsupport">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/tech-support-white.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
<p style=" font-size: 15px;
font-family: 'Roboto';
margin-right: 9%;
line-height: 1.2;
margin-left: 9%; margin-top: 22%;
color: rgb(58, 59, 60);">Tech Support</p>
</div>
<div class="product" id="ordermanagement">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/order-management-white.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 23%;
color: rgb(58, 59, 60);">Order Management</p>
</div>
<div class="product" id="employeemanagement">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/employee-management-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
color: rgb(58, 59, 60);">Employee Management</p>
</div>
<div class="product" id="whitelabel">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/white-label-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 14%;
margin-right: 14%; margin-top: 8%;
color: rgb(58, 59, 60);
">White Label</p>
</div>
</div>
<div class="product-contents">
<div class="product" id="brandcontrol">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/brand-control-white.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 8%;
line-height:1.2;
margin-right: 8%; margin-top: 20%;
color: rgb(58, 59, 60);
">Brand Control</p>
</div>
<div class="product" id="leadtracking">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/lead-tracking-white.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 5%;
margin-right: 5%; margin-top: 26%;
color: rgb(58, 59, 60);
">Lead Tracking & CRM</p>
</div>
<div class="product" id="custominvoicing">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/custom-invoicing-white.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 24%;
color: rgb(58, 59, 60);">Custom Invoicing</p>
</div>
<div class="product" id="goalsetting">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/goal-setting-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" />
<p style="font-size: 15px;
font-family: 'Roboto';
margin-right: 13%;
margin-left: 13%;
line-height: 1.2; margin-top: 24%;
color: rgb(58, 59, 60);">Goal Setting</p>
</div>
<div class="product" id="customizationtools">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/customization-tools-white.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">Customization Tools</p>
</div>
<div class="product" id="royaltycalculator">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/royalty-calculator-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
color: rgb(58, 59, 60);">Royalty Calculator</p>
</div>
<div class="product" id="emailmarketing">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/email-marketing-white.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 5%;
margin-right: 5%;
line-height:1.2; margin-top: 21%;
color: rgb(58, 59, 60);
">Email Marketing</p>
</div>
</div>
</div>
<div class="arrow-down"></div>
<div class="franchisehubtv" style="display:none;">
<div class="franchise-hub-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.png" alt="" width="53" height="53" style="margin-bottom:5%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Franchise Hub</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Franchise management hubs allow you to support your entire franchise network efficiently and transparently. Branding, invoicing, royalties, products and services, are organized by corporate, and then funneled down through the network as desired.
</p>
Learn More
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="cloudbasedtextipad" style="display:flex;">
<div class="cloud-based-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Cloud Based & Mobile</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>We’re cloud based and mobile first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Cloud-Based-Mobile.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="business-analytics" style="display:none;">
<div class="business-analytics-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Business Analytics</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Our business analytics and reports let you see real-time information on everything from hours worked to open orders and payments accepted. All your important daily figures, at a glance.
</p>
Learn More
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Business-Anylitics.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="tech-support" style="display:none;">
<div class="tech-support-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Tech Support</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Whether you, any of your franchisees, or their staff ever need help with BPro software, our support team is a quick online chat, email, or phone call away.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tech-Support.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="order-management" style="display:none;">
<div class="order-management-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Order Management</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Control your sales pipeline with our customizable and consistent order management system. Reference current orders, create new ones, duplicate existing orders and more.
</p>
Learn More
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Order-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="employee-management" style="display:none;">
<div class="employee-management-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Employee Managment</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Simplify your human resources and keep track of important details like employee start dates, birthdays, and payroll, all while being able to keep track of where and when everyone is being most effective.
</p>
Learn More
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Employee-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="white-label" style="display:none;">
<div class="white-label-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">White Label</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Sure, we made BPro, but we want it to really be your business software. Your templates, your colours, your logo, your language.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt="" width="450" height="450"class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="brand-control" style="display:none;">
<div class="brand-control-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Brand Control</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p >Control your brand across all locations, even internationally with our customizable templates, logo, language and branded colour options. No two locations will ever generate different invoices ever again (unless you want them to).
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt=""width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="lead-tracking" style="display:none;">
<div class="lead-tracking-text">
<img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Lead Tracking & CRM</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Take your sales and customer service to the next level with a customer relationship manager designed specifically with franchises and multi-location businesses in mind. Featuring automation, filtering and more.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Lead-Tracking-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="custom-invoicing" style="display:none;">
<div class="custom-invoicing-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Custom Invoicing</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Our custom invoicing lets you create consistent, professional and personalized invoices that link directly to a payment processing system.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Custom-Invoicing.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="goal-setting" style="display:none;">
<div class="goal-setting-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Goal Setting</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Goals are important! Make sure they’re communicated throughout your franchise network with our goal setting tool. Different goals for different locations or hubs? No problem.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Goal-Setting.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="customization-tools" style="display:none;">
<div class="customization-tools-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Customization Tools</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Flexibility to customize your software including the addition of your logo, brand colours, language, and so much more. Your business, your software.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Customization-Tools.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="royalty-calculator" style="display:none;">
<div class="royalty-calculator-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Royalty Calculator</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>No more complicated calculations when it comes to royalties. With our royalty calculator, you can set unique royalty rules for each location, or apply the same template across the board. Ensure consistency every billing period with the same system, and confirm numbers with our royalty reports.
</p>
Learn More
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Royalties.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="email-marketing" style="display:none;">
<div class="email-marketing-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Email Marketing</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397; margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p> With a franchise or multi-location business, we know you don’t always want all customers to be connected to the same email campaign, that’s why we established an integration with Emma. Keep things running with automated campaigns and customer info pushes from BPro to Emma.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
</div>
</body>
</html>

Why image is showing a gap in outlook?

I am a creating an email signature using HTML. I am using the HTML table to build it.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p>cloughcopywriting.com.au</p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>
Now In the browser, it looks like bellow image:
but in outlook, the image looks like bellow:
If you see then you can notice the red arrow. Here I am using an image for showing the curve but It's not full width in outlook but perfect on the browser.
Also, padding between Man image and text is not same.
How can I solve this issue?
Thanks.
So, basically,because of the outlook limitations, I recommend you to use an entire background image for your last row.
https://jsfiddle.net/pablodarde/css60wL2/
<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>

The div in my website move when I zoom. (Even if I use em or percentage)

I know that many people ask this question, but I can't make my website work. When I zoom every div go one under the other. I post only a little part of my html css cause the problem comes also with two div.
body {
margin: 0;
font-family: Sans-Serif;
background-image: url("pictures/backgroundbody.png");
background-repeat: repeat-x;
}
p {
display: inline;
}
a {
text-decoration: none;
}
#page {
margin: 0 auto;
}
#header{
height: 11.937em;
width: 100%;
margin-top: 0.812em;
}
#titlebar {
height: 6.25em;
}
#giga_weather_and_search{
float: right;
margin-right: 15em;
font-size: 0.875em;
color: #5278ae;
text-align: right;
width: 27.875em;
height: 6em;
}
#weather_bar{
font-size: 0.857em;
float: right;
}
#weather_bar td{
padding-left: 0.357em;
padding-right: 0.357em;
}
.weather_table{
padding: 0.428em;
border-spacing: 0px;
border-collapse: separate;
}
#upper_search_bar{
float: right;
font-size: 0.857em;
}
.upper_search_table{
padding: 0.214em;
}
#upper_search_bar td{
padding-left: 0.143em;
padding-right: 0.143em;
}
#bottom_search_bar{
float: right;
font-size: 0.857em;
}
#bottom_search_bar td{
padding-left: 0.143em;
padding-right: 0.143em;
}
#logo_bar{
margin-left: 12em;
margin-top: 4.312em;
float: left;
width: 23.125em;
height: 2.375em;
}
#logo_bar img{
width: 23.125em;
height: 2.375em;
}
<head>
<title>
Colorado Breaking News, Sports, Wheather, Traffic - The Denver Post
</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<style type="text/css">
A:link, A:visited {text-decoration: none}
A:hover {text-decoration: underline}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="titlebar">
<div id="giga_weather_and_search">
<div id="weather_bar">
<table class="weather_table">
<td style="white-space:nowrap">
<div class="weather">
Weather:
<img src="pictures/weather.png" alt="weather logo">
<p>Denver, CO</p>
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="now">
Now: 39°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="high">
High: 49°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="low">
Low: 49°
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="forecast">
5-Day Forecast
</div>
</td>
</table>
</div> <!--weather_bar-->
<div id="upper_search_bar">
<table class="upper_search_table">
<td style="white-space:nowrap">
<div class="newsletters">
Newsletter
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="subscribe">
Subscribe
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_weather_bar.png" alt="weather barretta">
</td>
<td style="white-space:nowrap">
<div class="member_services">
Member Services
</div>
</td>
</table>
</div> <!--upper_search_bar-->
<div id="search_bar">
<img src="pictures/search_bar.png" alt="search bar"/>
</div>
<div id="bottom_search_bar">
<table class="bottom_search_table">
<td style="white-space:nowrap">
<div class="autos">
Autos
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_bottom_search_bar2.png" alt="barretta bottom search bar">
</td>
<td style="white-space:nowrap">
<div class="real_estate">
Real Estate
</div>
</td>
<td style="white-space:nowrap">
<img src="pictures/barretta_bottom_search_bar2.png" alt="barretta bottom search bar">
</td>
<td style="white-space:nowrap">
<div class="jobs">
Jobs
</div>
</td>
</table>
</div> <!--bottom_search_bar-->
</div> <!--giga_weather_and_search-->
<div id="logo_bar">
<img src="pictures/logo_bar.png"/>
</div>
</div> <!--titlebar-->
</div> <!--header-->
</div> <!--page-->
</body>