So I have a simple image-thumbnails landing page like:
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
On my site 4 are shown side by side on desktop. How do I force them to appear in twos in one line on mobile view?
So:
Desktop:
# # # #
Mobile:
# #
# #
If you are ok with clear:both then go with this solution.
Updated Demo
It will give you break at that point where you want to..i have used custom media queries and change according to your need. Hope it will help..
You have to add a media query to set the width of divs to 50% at the specified breakpoint.
#media (max-width: 400px) {
div {
width: 50%;
}
}
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
Reference: MDN - CSS media queries
Related
Ive been given a task to make the links (which are also images) go from 6 horizontal links, then collapsing them into 3 and then 3 on top of each other.
The catch here is its for en email template to be sent out. And although I have been making my template responsive, it only seems to go from 6 links in a horizontal line, to 6 links aligned vertically. No mini collapsing in between? Just straight horizontal, or straight vertical.
My main dilemma, is because this is for email, I am forced to do everything with inline CSS, something im not to keen on..
Ive tried using flex (obviously wont work) tried using different implementations of tables, but I cant get it to collapse in the desired manner...
Goal: To get it from going 6 horizontal, to collapsing to 3 and 3 on top of each other vertically. Any advice or help is greatly appreciated, thanks.
NOTE I only put 2 as there was no need to do it up to 6, but this is the usual approach I was taking
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<style type="text/css">
#media only screen and (max-width: 640px){
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
</style>
Here is the resolution to your problem using flex and having divs. I don't see the need of nested tables.
Js Fiddle Link
Html
<div class="container">
<div class="inner-container">
<div class="element">
<img src="whatever" alt="Fragrances"/>
</div>
<div class="element">
<img src="whatever" alt="Wicks"/>
</div>
<div class="element">
<img src="whatever" alt="Vessels"/>
</div>
</div>
<div class="inner-container">
<div class="element">
<img src="whatever" alt="Wax"/>
</div>
<div class="element">
<img src="whatever" alt="Kits"/>
</div>
<div class="element">
<img src="whatever" alt="Diffusers"/>
</div>
</div>
</div>
And Styles:
.element {
padding: 5px;
border: 1px black solid;
}
.inner-container {
display:flex;
justify-content: center;
}
#media (max-width: 600px) {
.container {
display: block;
}
}
#media (min-width: 600px) {
.container {
display: flex;
justify-content: center;
}
}
Try float left and width 100% ...
THis is what got the closest success as flex WILL NOT work with email services, although it wasn't inline, the only aspect that wont work in terms of responsive email is:
#media (max-width: 600px) {
.non-flex-inner-container {
display: inline-block;
}
}
as this cannot be made inline to my knowledge..
Here is the closest success:
<style type="text/css">
.non-flex-container {
display: inline;
text-align: center;
width: 100%;
float: left;
}
.non-flex-inner-container {
display: inline;
text-align: center;
width: 100%;
}
.non-flex-element {
display: inline;
}
#media (max-width: 600px) {
.non-flex-inner-container {
display: inline-block;
}
}
</style>
<div class="non-flex-container">
<div class="non-flex-inner-container">
<div class="non-flex-element">
<img src="img" alt="" width="100" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="50" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="70" height="10" style="margin:10px;"/>
</div>
</div><br>
<div class="non-flex-inner-container">
<div class="non-flex-element">
<img src="img" alt= width="40" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="40" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="100" height="10" style="margin:10px;"/>
</div>
</div>
</div>
This was complete success in terms of email and inline css, HOWEVER I was only able to achieve this with AMP pages, and apparently email services arent able to freely send amp pages unless said person whitelists you... Which completely defeats the purpose regardless...
width:100%; float:left;">
<div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)" /></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
</div>
<div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
</div>
<!-- Display Inline-block when less than 600px -->
<div class="non-flex-container" style="display:inline; text-align:center; width:100%; float:left;">
<div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)" /></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
</div>
<div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
</div>
</div>
The conclusion... It isnt possible yet.... If anyone else has any more insight, please let me know. Big thanks to #Rustam Goygov for the insight and guidance!
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I am trying to create multiple photo galleries on one page. I can get the first gallery to work but when I try to add a second gallery neither of the pictures work. Could someone help me out and see what I have wrong or am missing? Thank you!
HTML:
<div class="gallery" align="center" id="gal1" >
<div class="thumbnails" id="thumb1" >
<img onmouseover="preview1.src=img1.src" name="img1" src="flower.jpg" alt="" />
<img onmouseover="preview1.src=img2.src" name="img2" src="blue_light.jpg" alt="" />
<img onmouseover="preview1.src=img3.src" name="img3" src="paintwithlight/JPEG/yellow-blue.jpg" alt="" />
<img onmouseover="preview1.src=img4.src" name="img4" src="paintwithlight/JPEG/abstract.jpg" alt="" />
<img onmouseover="preview1.src=img5.src" name="img5" src="paintwithlight/JPEG/angelin.jpg" alt="" />
<img onmouseover="preview1.src=img6.src" name="img6" src="paintwithlight/JPEG/anna.jpg" alt="" />
<img onmouseover="preview1.src=img7.src" name="img7" src="paintwithlight/JPEG/butterfly.jpg" alt="" />
<img onmouseover="preview1.src=img8.src" name="img8" src="paintwithlight/JPEG/clash.jpg" alt="" />
<img onmouseover="preview1.src=img9.src" name="img9" src="paintwithlight/JPEG/craze.jpg" alt="" />
<img onmouseover="preview1.src=img10.src" name="img10" src="paintwithlight/JPEG/dolphin.jpg" alt="" />
<img onmouseover="preview1.src=img11.src" name="img11" src="paintwithlight/JPEG/greenswirl.jpg" alt="" />
<img onmouseover="preview1.src=img12.src" name="img12" src="paintwithlight/JPEG/halfcircle.jpg" alt="" />
<img onmouseover="preview1.src=img13.src" name="img13" src="paintwithlight/JPEG/mindblown.jpg" alt="" />
<img onmouseover="preview1.src=img14.src" name="img14" src="paintwithlight/JPEG/mystic.jpg" alt="" />
<img onmouseover="preview1.src=img15.src" name="img15" src="paintwithlight/JPEG/radiation.jpg" alt="" />
<img onmouseover="preview1.src=img16.src" name="img16" src="paintwithlight/JPEG/rainbow.jpg" alt="" />
<img onmouseover="preview1.src=img17.src" name="img17" src="paintwithlight/JPEG/stuckcircle.jpg" alt="" />
<img onmouseover="preview1.src=img18.src" name="img18" src="paintwithlight/JPEG/swirl.jpg" alt="" />
<img onmouseover="preview1.src=img19.src" name="img19" src="paintwithlight/JPEG/whitelight.jpg" alt="" />
<img onmouseover="preview1.src=img20.src" name="img20" src="paintwithlight/JPEG/zeus.jpg" alt="" />
</div>
<div class="preview1" align="center">
<img name="preview1" src="flower.jpg" alt=""/>
</div>
</div>
<div class="gallery" align="center" id="gal2" >
<div class="thumbnails" id="thumb2" >
<img onmouseover="preview2.src=img1.src" name="img1" src="nature/JPEG/apple.jpg" alt="" />
<img onmouseover="preview2.src=img2.src" name="img2" src="nature/JPEG/cig.jpg" alt="" />
<img onmouseover="preview2.src=img3.src" name="img3" src="nature/JPEG/deadflower.jpg" alt="" />
<img onmouseover="preview2.src=img4.src" name="img4" src="nature/JPEG/halfnhalf.jpg" alt="" />
<img onmouseover="preview2.src=img5.src" name="img5" src="nature/JPEG/leaf.jpg" alt="" />
<img onmouseover="preview2.src=img6.src" name="img6" src="nature/JPEG/liveflower.jpg" alt="" />
<img onmouseover="preview2.src=img7.src" name="img7" src="nature/JPEG/mush.jpg" alt="" />
<img onmouseover="preview2.src=img8.src" name="img8" src="nature/JPEG/mushroom.jpg" alt="" />
<img onmouseover="preview2.src=img9.src" name="img9" src="nature/JPEG/pumpkin.jpg" alt="" />
<img onmouseover="preview2.src=img10.src" name="img10" src="nature/JPEG/redflower.jpg" alt="" />
<img onmouseover="preview2.src=img11.src" name="img11" src="nature/JPEG/rocks.jpg" alt="" />
<img onmouseover="preview2.src=img12.src" name="img12" src="nature/JPEG/silo.jpg" alt="" />
<img onmouseover="preview2.src=img13.src" name="img13" src="nature/JPEG/tree.jpg" alt="" />
<img onmouseover="preview2.src=img14.src" name="img14" src="nature/JPEG/tree2.jpg" alt="" />
<img onmouseover="preview2.src=img15.src" name="img15" src="nature/JPEG/tree3.jpg" alt="" />
<img onmouseover="preview2.src=img16.src" name="img16" src="nature/JPEG/water.jpg" alt="" />
<img onmouseover="preview2.src=img17.src" name="img17" src="nature/JPEG/yellowflower.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview2" src="nature/JPEG/apple.jpg" alt=""/>
</div>
</div>
CSS:
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview1 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
.thumbnails #thumb2 img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails #thumb2 img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview2 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
The name attribute on an <img> tag is obsolete in HTML5 and should not be used in production.
→ Use data-* attribute instead.
align attribute is obsolete or nonstandard
→ Use style text-align:center; instead
Inline JavaScript makes developing hard and code maintenance a nightmare.
→ Place your JavaScript code into <script>, away from your HTML tags.
Here's an example how to easily create multiple hover-able galleries:
function hoverGal() {
var bigID = this.parentNode.dataset.targetid;
document.getElementById(bigID).src = this.dataset.big;
}
[].forEach.call(document.querySelectorAll("[data-big]"), function(thumb) {
thumb.addEventListener("mouseenter", hoverGal, false);
});
<div data-targetid="big1">
<img src="//placehold.it/100x60/0fb" data-big="//placehold.it/360x200/0fb" alt="">
<img src="//placehold.it/100x60/fb0" data-big="//placehold.it/360x200/fb0" alt="">
<img src="//placehold.it/100x60/b0f" data-big="//placehold.it/360x200/b0f" alt="">
</div>
<img id="big1" src="//placehold.it/360x200/0fb">
<div data-targetid="big2">
<img src="//placehold.it/100x60/bf0" data-big="//placehold.it/360x200/bf0" alt="">
<img src="//placehold.it/100x60/f0b" data-big="//placehold.it/360x200/f0b" alt="">
<img src="//placehold.it/100x60/0bf" data-big="//placehold.it/360x200/0bf" alt="">
</div>
<img id="big2" src="//placehold.it/360x200/bf0">
That way you won't get into collision having duplicate thumbnails names / IDs or having to invent tons of different names.
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
I have three images that I want to display in a single row next to each other.
Here is the HTML:
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
Here is the CSS:
#client_logos { display: inline-block; }
For some reason, it only displays two logos next to each other. Not sure what's wrong. Any ideas?
URL: http://rainleader.com/who-we-are/
See screenshot.
You have a line break <br> in-between the second and third images in your markup. Get rid of that, and it'll show inline.
The code you have posted here and code on your site both are different. There is a break <br> after second image, so the third image into new line, remove this <br> and it will display correctly.
Place this css in your page:
<style>
#client_logos {
display: inline-block;
width:100%;
}
</style>
Replace
<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>
To
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>