Text below image on mobile

  • Resolved cromermusic

    (@cromermusic)


    10 years, 1 month ago

    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)
  • Thread Starter cromermusic

    (@cromermusic)

    10 years ago

    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?

    Evan Herman

    (@eherman24)

    10 years ago

    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

    Thread Starter cromermusic

    (@cromermusic)

    10 years ago

    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!!!

    Thread Starter cromermusic

    (@cromermusic)

    10 years ago

    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?

    Thread Starter cromermusic

    (@cromermusic)

    10 years ago

    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.