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
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)
Viewing 12 replies - 1 through 12 (of 12 total)
- The topic ‘Responsive Image and text’ is closed to new replies.