Support » Fixing WordPress » Text below image on mobile

  • Resolved cromermusic

    (@cromermusic)


    I’m using a child theme for Twenty Twelve and have set the featured image to align left since I want text to the right. However I want the text to go below the image when using mobile. The Twenty Twelve theme is responsive.

    Here is the Thumbnail/Featured Image code I’m using:

    <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); } ?>

    Don’t know where the responsive code lies and what to do?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Ok, I’ve been trying to work this out by using div-class but something just isn’t working. On the mobile the_content starts to the right of the info box and not below. I’ve tried to increase the width on info-box but it fails. I’m using a child theme for twenty-twelve. What I want is simply to have a mobile view that looks like this:
    [IMAGE]
    [SOME TEXT]
    [<?php the_content();>]

    Here’s the code:

    <div class="entry-content">
    <div class="short">
    [IMAGE]
    <div class="info-box">
    [SOME TEXT]
    </div>
    </div>
    [<?php the_content();>]
    </div>

    CSS:

    .short {
    	border: 1px solid;
    	}
    
    .info-box {
    	float: left;
    	width: 400px;
    	}

    You can see how it looks here http://www.pennycentury.com
    Any ideas?

    On mobile, using breakpoints (or the ones built into the theme) , at some point you’ll have to set the thumbnail image to display block width:100%; and do the same for the content to the right of the image. That way they’ll stack.

    I played with it in Chrome for a minute and got this

    Tanks! It work and I added there lines after looking into the original themes CSS. He’re whot I did:

    `/* Minimum width of 480 pixels. */
    @media (max-width: 480px) {
    .alignleft,img.alignleft{
    float:left;margin:5px 10px 5px 0;
    display: block;
    width: 100%;
    }

    .info-box {
    float: left;
    width: 100%;
    display: block;
    }
    }

    Thanks again. It was vey heplful!!!

    I solved it this way:

    @media (max-width: 960px) {
    
    .sort {
            display: block;
            width: 100%;
             }
    
    .alignleft,img.alignleft{
    	float:left;margin:5px 10px 5px 0;
    	display: block;
    	width: 100%;
    	}
    
    .info-box {
    	float: left;
    	width: 100%;
    	display: block;
    	}
    }

    only now my widgets are outside the area when I flip my phone. Should I make the widget-area float: left when mobile?

    I used widget-area float: left on mobile view and it looks good.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Text below image on mobile’ is closed to new replies.