Image manipulation with CSS on tablets

Posted on 2012-09-20
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 9

    Expert Comment

    by:Ishaan Rawat
    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

    @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

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now