admin管理员组文章数量:1390410
My post contents (single.php) overflows on my mobile phone so the page is wider than phone's screen.
Post Example:
/2020/02/23/work-with-a-team/
I used to bootstrap 4 for grid system
Single.php code snippet which contains after parallax section:
I am sorry for undeleted comment lines.
<div class="container-fluid single-post">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-10 col-lg-10 col-md-10">
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
<!-- <div class="parallax" style="background-image: url("<?php the_post_thumbnail(); ?>");"></div>-->
<div style="height:100%;">
<!-- <?php //the_post_thumbnail(); // Fullsize image for the single post ?> -->
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<h1>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"><?php //the_title(); ?></a>-->
</h1>
<!-- /post title -->
<div class="row">
<div class="col-sm-1 left-toltip">
<?php global $post; ?>
<div class="sticky-top ">
<a class="tooltips" href=".php?u=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2">
<span>Facebook</span>
</a>
<a class="tooltips" href="=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2">
<span>Twitter</span>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a class="tooltips" href="/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
<span>Pinterest</span>
</a>
<a class="tooltips" href="#see">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_eye-24_103177 (1).png" alt="Logo" class="logo-img2">
<span><?php _e( 'You should see', 'html5blank' ); ?></span>
</a>
<a class="tooltips" href="#cost">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_currencysvg_1579795.png" alt="Logo" class="logo-img2">
<span><?php _e( 'Costs', 'html5blank' ); ?></span>
</a>
<a class="tooltips" href="#budget">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_58_2529974.png" alt="Logo" class="logo-img2">
<span><?php _e( 'Budget Tips', 'html5blank' ); ?></span>
</a>
</div>
</div>
<div class="col-sm-11" >
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>
<?php comments_template(); ?>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;">
<?php get_sidebar(); ?>
</div>
</div>
</div>
My post contents (single.php) overflows on my mobile phone so the page is wider than phone's screen.
Post Example:
http://www.migrate666.deniz-tasarim.site/2020/02/23/work-with-a-team/
I used to bootstrap 4 for grid system
Single.php code snippet which contains after parallax section:
I am sorry for undeleted comment lines.
<div class="container-fluid single-post">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-10 col-lg-10 col-md-10">
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
<!-- <div class="parallax" style="background-image: url("<?php the_post_thumbnail(); ?>");"></div>-->
<div style="height:100%;">
<!-- <?php //the_post_thumbnail(); // Fullsize image for the single post ?> -->
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<h1>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"><?php //the_title(); ?></a>-->
</h1>
<!-- /post title -->
<div class="row">
<div class="col-sm-1 left-toltip">
<?php global $post; ?>
<div class="sticky-top ">
<a class="tooltips" href="https://www.facebook/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2">
<span>Facebook</span>
</a>
<a class="tooltips" href="https://twitter/share?url=<?php echo get_permalink($post->ID);?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2">
<span>Twitter</span>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a class="tooltips" href="http://pinterest/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
<span>Pinterest</span>
</a>
<a class="tooltips" href="#see">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_eye-24_103177 (1).png" alt="Logo" class="logo-img2">
<span><?php _e( 'You should see', 'html5blank' ); ?></span>
</a>
<a class="tooltips" href="#cost">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_currencysvg_1579795.png" alt="Logo" class="logo-img2">
<span><?php _e( 'Costs', 'html5blank' ); ?></span>
</a>
<a class="tooltips" href="#budget">
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/iconfinder_58_2529974.png" alt="Logo" class="logo-img2">
<span><?php _e( 'Budget Tips', 'html5blank' ); ?></span>
</a>
</div>
</div>
<div class="col-sm-11" >
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>
<?php comments_template(); ?>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;">
<?php get_sidebar(); ?>
</div>
</div>
</div>
1 Answer
Reset to default 0In your style.css you have the following on line 580:
.container-fluid.single-post {
width: 1280px;
}
You have to add media queries and adjust this size at different breakpoints or just try changing that to:
.container-fluid.single-post {
width: 100%;
}
That takes care of most of it, but then lower down you have a textarea that has col="45" which still makes the content wider than the screen on phones. So that should be changed to be either something like col="40" or better still, try to remove the col attribute all together and instead in the style.css add:
ments textarea#comment{
width:100%;
}
I imagine you'll encounter this issue frequently and will need to adjust these pixel specific widths to percentages for a truly fluid layout.
Also, that giant cursor hand is killing me.
本文标签： functionsPost content overflows on my mobile phone
版权声明：本文标题：functions - Post content overflows on my mobile phone 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744666888a2618585.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论