Coding two images side by side to be responsive

Report · Oct 19, 2017

Hi guys,

I'm struggling to fix two side by side images. I've tried different codes and div, tags but I can't seem to get them to stay on one line and also be responsive for smaller screens/mobile view.

The second image is what I want it to look line in mobile view, with both images on one line

CCS:

divimage-gallery img {

display: block;

float: static;

}

.clear {

clear: both;

height: auto;

max-width: 100%

line-height: 0;

}

and html:

</div>

Thank you!

Report · Oct 19, 2017

Instead of using display block and floating the images,

use display: inline-block;

Report · Oct 19, 2017

You have a fair number of errors in the code snippets you've posted. Is that your actual code, or were the type-os added because you didn't copy/paste to the forum?

Could you post the entire code of the page so we can see what you're actually working with? (better yet, post a link to the page in progress)

Report · Oct 19, 2017

What is type-os? Apologies, I'm fairly new to using dreamweaver and I'm working from one of the templates

<!doctype html>

<html>

<head>

/* What it does: Remove spaces around the email design added by some email clients. */

/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */

html, body {

margin: 0 !important;

padding: 0 !important;

height: auto !important;

width: 100% !important;

}

/* What it does: Stops email clients resizing small text. */

* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

/* What it does: Forces Outlook.com to display emails full width. */

.ExternalClass {

width: 100%;

}

/* What is does: Centers email on Android 4.4 */

div[style*="margin: 16px 0"] {

margin: 0 !important;

}

/* What it does: Stops Outlook from adding extra spacing to tables. */

table, td {

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}

/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {

border-spacing: 0 !important;

border-collapse: collapse !important;

table-layout: fixed !important;

margin: 0 auto !important;

}

table table table {

table-layout: auto;

}

/* What it does: Uses a better rendering method when resizing images in IE. */

img {

-ms-interpolation-mode: bicubic;

}

/* What it does: Overrides styles added when Yahoo's auto-senses a link. */

.yshortcuts a {

border-bottom: none !important;

}

/* What it does: Another work-around for iOS meddling in triggered links. */

a[x-apple-data-detectors] {

color: inherit !important;

}

</style>

/* What it does: Hover styles for buttons */

.button-td,

.button-a {

transition: all 100ms ease-in;

}

.button-td:hover,

.button-a:hover {

background: #f2f3f4 !important;

border-color: #555555 !important;

}

/* Media Queries */

@media screen and (max-width: 600px) {

.email-container {

width: 100% !important;

}

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */

.fluid,

.fluid-centered {

max-width: auto !important;

height: auto !important;

margin-left: auto !important;

margin-right: auto !important;

}

/* And center justify these ones. */

.fluid-centered {

margin-left: auto !important;

margin-right: auto !important;

}

/* What it does: Forces table cells into full-width rows. */

.stack-column,

.stack-column-center {

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}

/* And center justify these ones. */

.stack-column-center {

text-align: center !important;

}

/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */

.center-on-narrow {

text-align: center !important;

display: block !important;

margin-left: auto !important;

margin-right: auto !important;

float: none !important;

}

table.center-on-narrow {

display: inline-block !important;

}

div.image-gallery {

display: block;

background-color: #cccccc;

}

divimage-gallery img {

display: block;

float: static;

}

.clear {

clear: both;

height: auto;

max-width: 100%

line-height: 0;

}

</style>

</head>

<tr>

<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) </div>

</table>

</div>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

</td>

</tr>

</table>

<tr>

</table>

<tbody>

</tbody>

</table>

<tr>

</table>

<tr>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

<tr>

</span> <br>

<br>

<tr>

</table>

</tr>

<tr>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

</table>

<tbody>

</tbody>

</table>

<tbody>

</tbody>

</table>

</table>

<tr>

<br>

</tr>

</table>

</center></td>

</tr>

</table>

</body>

</html>

Report · Oct 19, 2017

Type-o = typing mistake.

You have a few errors in your code that will keep it from doing what you expect. First, you are missing something in your img selector: "divimage-gallery img" should have a . between div and image-gallery, so "div.image-gallery img" if you're trying to target <img> tags within the <div class="image-gallery">. Also, "static" isn't a valid option for the float property. That would be correct for the display property. If you don't want something floated, remove the float property, or change it to "none".

Are you trying to create an html email or a web page?

Don't use embedded css (css in the <head> of the document) in html emails, it gets stripped out by a few email clients and will break your email design/layout in your recipient's inbox.

If you're making a web page, don't use the html email templates in DW. They're not fit for real web pages and use outdated coding methods to appease a broader cross section of email clients.

Whether you're attempting an email or a web page will change the code you should be using, and where it's written.

Report · Oct 19, 2017

Thank you for your help.

Yes I'm creating a template for a newsletter, which is going to be sent through an email application to be viewed on Outlook.

Report · Oct 19, 2017

See HTML E-Mail & Newsletter Blasts - https://alt-web.com/

For best results, start with an industry tested email template. https://litmus.com/resources/free-responsive-email-templates

Free Responsive Email Templates

See results on various devices:

Newsletter

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator