Learn how to a build a cloud-first strategyRegister Now


Image manipulation with CSS on tablets

Posted on 2012-09-20
Medium Priority
Last Modified: 2012-10-02
I have been working on a website and am running into a problem with it when viewed on a tablet.

Within a Div tag I have 2 images that are side by side - one floated left and the other right.

On a computer they look fine but when viewed on a tablet, depending on orientation, the right image will slide under the first but retain it's float:right attribute. The issue is that I need them to resize slightly to fit side by side.

I've been pouring over fluid design ideas to fix this but can't seem to come up with anything. My code is below. I'm trying to stay away from the javascript route if possible. If someone could lend a hand I would greatly appreciate it.

<div >
        			<a href="link"><img style="float: left; max-width: 100%;" src="path/imageA.png" /></a>
        			<a href="link"><img style="float: right; max-width: 100%;" src="path/imageB.png" /></a>

Open in new window

Question by:mascoloj
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 38421079
Try this

Put this in head...

<style type="text/css">
			@media screen and (max-width: 768px) {
			    .main {
			        display: block;

Open in new window

and then body

<div class="main" >
        			<a href="link"><img style="float: left; max-width: 100%;" src="ImageA.png" /></a>
        			<a href="link"><img style="float: right; max-width: 100%;" src="ImageB.png" /></a>

Open in new window

LVL 16

Accepted Solution

s8web earned 2000 total points
ID: 38422738
@media only screen and (max-width: 768px) {
	.main img.theimage{width:80%;height:auto;} /*Adjust width to fit your needs*/
<div class="main">
    <a href="link"><img class="theimage" style="float:left;" src="ImageA.png" /></a>
    <a href="link"><img class="theimage" style="float:right;" src="ImageB.png" /></a>

Open in new window

Or you might dig this:

@media only screen and (max-width: 768px) {
	.main img.theimage{width:80%;height:auto;float:left;} /*Adjust width to fit your needs*/
	.main img.theimage:first-child{margin-right:10px;}
<div class="main">
    <a href="link"><img class="theimage" src="ImageA.png" /></a>
    <a href="link"><img class="theimage" src="ImageB.png" /></a>

Open in new window


Author Closing Comment

ID: 38455810
This worked out really well. I'm sure both solutions would work however.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question