Participating Frequently

Question

Coding two images side by side to be responsive

Forum|Forum|8 years ago
October 19, 2017
2 replies
1842 views

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!

This topic has been closed for replies.

Jon Fritz

Community Expert

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)

C

coraj57837290Author

Participating Frequently

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>

Jon Fritz

Community Expert

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.

pziecina

Legend

Instead of using display block and floating the images,

use display: inline-block;

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded