• 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
    https://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

    (@smijanic)

    Anyone can help, would be very happy ??

    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

    (@smijanic)

    Hey codeManiac
    Here I added a article as example with english title and some english text as content
    https://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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Just a fyi, your theme author can be contacted here: https://www.3dsvstudio.co.uk/contacts.php

    Thread Starter smijanic

    (@smijanic)

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

    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

    (@smijanic)

    I added the code just, it fixes only the article on the top and all articles under him stay the same ??

    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

    (@smijanic)

    will try now ??

    Thread Starter smijanic

    (@smijanic)

    no luck sadly , when i check on my phone its same ??
    i wish this guy did a better job in coding

    Thread Starter smijanic

    (@smijanic)

    codeManiac you know if I can do anything else more, before I try to contact this guy to help me?

    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.