Title: Responsive Image and text
Last modified: August 30, 2016

---

# Responsive Image and text

 *  [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/)
 * Hello Guys/Girls
 * I have a problem on my webpage that if I check my category page the articles 
   insides the page, the text next to the image of the article gets cut off on mobile
   phones when the screen size is reduced.
 * I am not that good with css, so if someone could help me I would be very thankful
 * Here is a example
    [http://www.crotabi.com/category/croatia-islands/](http://www.crotabi.com/category/croatia-islands/)
 * when you shrink the browser or view it on your mobile phone ,you will notice 
   that the text next to the images gets cut off and the title of the article also.
 * Is there a way to fix this that the Title goes on top of the image and that the
   text goes just under the image?
 * my catagory.php file
 *     ```
       <?php get_header(); ?>
         <div id="headgal"> 
   
       <div id="main-content"> <div id="inside">
   
        <div id="content">	
   
        <div id="homepost">
   
       <div id="feat">
       <div id="colorcontentwrap4">
   
       		<div class="featbig">
       		 <?php $count = 0; ?>
           	<?php if (have_posts()) : ?>
               <?php while (have_posts() && $count < get_option('posts_per_page') && (($count < '1'))) : the_post(); $count++; ?>
   
                  <?php if(get_option('thumbok')!="no"):?>  <?php if( has_post_thumbnail() ) { ?>
                   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('featbigimg'); ?></a>
                    <?php } else { ?>
                  <a href="<?php the_permalink(); ?>">  <img src="<?php bloginfo('template_directory'); ?>/images/noimg.png" style="width:418px; height:215px;" /> </a><?php } ?>
                  <?php endif?> 
   
                  <?php if(get_option('thumbok')!="yes"):?>
       <?php 	$m_scrp = get_template_directory_uri() . '/includes/timthumb.php?';
                           	$m_image = ''; $m_image_def = get_template_directory_uri() . '/images/nobigimg.png';
                           	$customfields = get_post_custom();  if (empty($customfields['image'][0])) {
       $m_image = m_theme_capture_first_image(); } else { $m_image = $customfields['image'][0]; } if (empty($m_image)) { $imgpath = $m_image_def;  	} else {
       $imgpath = $m_scrp . 'src=' . $m_image . '&w=' . 205 . '&h=' . 120 . '&zc=1'; } ?>
         <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
         <img src="<?php echo $imgpath; ?>" alt="" /> </a>
        <?php endif?>
       		<div id="meta_author0"></div>
       		<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
       	    <?php
       		/*the_content_limit(127,'<p>vise</p>'); */
   
       		echo ml_fancy_big_excerpt('',340);
       $link_to_first_article=get_the_ID();
       		?>
       		<a href="<?php the_permalink();?>">続きを読む</a>
   
       		<?php endwhile; ?>
              <div class="cb"></div>
       		</div>
       		 </div>
   
       </div>
        <?php if(get_option('ad6ok')!="yes"):?><?php endif?>
           <?php if(get_option('ad6ok')!="no"):?><center style="margin-top: 8px;"><?php echo get_option('ad6'); ?></center><?php endif?>
           <div id="coloredblock4">
                      <div id="colorcontentblock">
       <?php while (have_posts() && $count < get_option('posts_per_page') && (($count < '10'))) : the_post();
       $link_to_this_article=get_the_ID();
       if ($count>=1 && $link_to_this_article!=$link_to_first_article)
       {
        ?>
   
           <div id="colorcontentwrap4"> 
   
                   <?php if(get_option('thumbok')!="no"):?>  <?php if( has_post_thumbnail() ) { ?>
                   <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('colorcontentblock4'); ?></a>
                    <?php } else { ?>
                  <a href="<?php the_permalink(); ?>">  <img src="<?php bloginfo('template_directory'); ?>/images/noimg.png" style="width:205px; height:120px;" /> </a><?php } ?>
                  <?php endif?> 
   
                  <?php if(get_option('thumbok')!="yes"):?>
       <?php 	$m_scrp = get_template_directory_uri() . '/includes/timthumb.php?';
                           	$m_image = ''; $m_image_def = get_template_directory_uri() . '/images/nobigimg.png';
                           	$customfields = get_post_custom();  if (empty($customfields['image'][0])) {
       $m_image = m_theme_capture_first_image(); } else { $m_image = $customfields['image'][0]; } if (empty($m_image)) { $imgpath = $m_image_def;  	} else {
       $imgpath = $m_scrp . 'src=' . $m_image . '&w=' . 205 . '&h=' . 120 . '&zc=1'; } ?>
         <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
         <img src="<?php echo $imgpath; ?>" alt="" /> </a>
        <?php endif?> 
   
                 <div class="meta_author">    <div id="meta_authorl">
         </div>
           <div id="meta_authorr">
          </b>
           </div>  <div class="cb"></div>
              </div>
                      <h2>   <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
   
       	    <?php
       		/*the_content_limit(127,'<p>vise</p>'); */
   
       		echo ml_fancy_big_excerpt('',340);
       		?>
       		<a href="<?php the_permalink();?>">続きを読む</a>
       		 <div class="cb"></div>
       		</div>
           	<?php
       }
       $count++;
       endwhile; endif; ?>
             <div class="cb"></div>
           </div>
           </div>
   
       </div>
        <?php if(get_option('ad7ok')!="yes"):?><?php endif?>
           <?php if(get_option('ad7ok')!="no"):?><center style="margin-top: 8px;"><?php echo get_option('ad7'); ?></center><?php endif?>
       <div id="pag">
   
       	<div id="pagl"><?php previous_posts_link() ?></div>
   
       	<div id="pagr"><?php next_posts_link() ?></div>
   
           <div class="cb"></div>
   
       </div>  
   
        </div>   </div>   </div>  
   
        <?php include(TEMPLATEPATH . '/sidebar-archive.php'); ?>  
   
       <?php get_footer(); ?>
       ```
   

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883104)
 * Anyone can help, would be very happy 🙂
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883105)
 * Hey smijanic !
 * I saw your problem earlier today and its easy for sure but what causes a problem
   is the language and the coding it uses 🙂 I see it just as many squares and it
   doesn’t help distinguish which is the title and which is the content. Maybe if
   you make a post in English on your website that shows with the other posts I 
   can help you achieve your goal
 * Cheers !
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883107)
 * Hey codeManiac
    Here I added a article as example with english title and some
   english text as content [http://www.crotabi.com/category/fuzine/](http://www.crotabi.com/category/fuzine/)
 * I am happy how the page and all articles look like on desktop PC, but on mobile
   phones I would like that the title goes above the picture and the content text
   under the picture.
 * So I want to keep the desktop version of the page how it is now , just when it
   becomes responsive for the mobile phones that title goes above picture and content
   text under the picture.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883108)
 * Just a fyi, your theme author can be contacted here: [http://www.3dsvstudio.co.uk/contacts.php](http://www.3dsvstudio.co.uk/contacts.php)
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883109)
 * Andrew
    Takes too long time to replay him and he is busy with other things atm.
   If its something that I can do by myself I rather do it then 🙂
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883113)
 * Well smijanic, he is busy or not that’s what he must do. When you buy a theme,
   you buy good support with it which means a good theme == a good theme + good 
   support 🙂
 * Anyway add the following to your style.css file and it would solve the problem
   🙂
 *     ```
       @media only screen and (max-width: 767px) {
           #meta_author0 {
               clear: both;
           }
       }
       ```
   
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883114)
 * I added the code just, it fixes only the article on the top and all articles 
   under him stay the same 😛
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883116)
 * hmm weird try this instead :
 *     ```
       @media only screen and (max-width: 767px) {
           div#colorcontentwrap4 h2 {
              clear: both;
            }
       }
       ```
   
 * I don’t think I like how the theme is coded
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883117)
 * will try now 🙂
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883118)
 * no luck sadly , when i check on my phone its same 🙁
    i wish this guy did a better
   job in coding
 *  Thread Starter [smijanic](https://wordpress.org/support/users/smijanic/)
 * (@smijanic)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883120)
 * codeManiac you know if I can do anything else more, before I try to contact this
   guy to help me?
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883127)
 * Good morning smijanic !
 * The solutions I provided worked in my browser but why they didn’t work when you
   directly pasted the code is sthg that I have no idea why , this is sthg I can
   guess only if am looking directly at the website. For what you do , contacting
   your theme author must be your 1 option not last one. So simply contact him 🙂
 * Good luck ! 🙂

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Responsive Image and text’ is closed to new replies.

## Tags

 * [align](https://wordpress.org/support/topic-tag/align/)
 * [cut](https://wordpress.org/support/topic-tag/cut/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [text](https://wordpress.org/support/topic-tag/text/)
 * [wrap](https://wordpress.org/support/topic-tag/wrap/)

 * 12 replies
 * 3 participants
 * Last reply from: [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-image-and-text/#post-6883127)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics