I am using a responsive Wordpress theme, Nexus, and I am having issues when viewing the website from mobile devices. The post content is fine when viewing the website from a desktop but the main content disappears (as though font-color becomes transparent or is changed to white) but the space for the content is still present. This has been tested on Safari and Chrome for iOS7 (iPhone and iPad).
I have tried disabling any plugins that may be the cause of this problem but to no avail. The issue cannot be replicated when resizing the browser on a desktop, the site responds and adapts as it should without loosing any content, so I assume it may be something to do with the meta tag in use, but the header and footer content shows fine. Could it be something to do with the page.php
( the 'default template' )?
The meta tag currently in use is:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The website can be viewed at www.cafestylespeedtraining.net.
This is the page.php
file:
<?php
$featured_image = false;
if ( '' != get_the_post_thumbnail() ) :
$featured_image = true;
?>
<div class="post-thumbnail">
<div class="container">
<h1 class="post-heading"><?php the_title(); ?></h1>
</div> <!-- .container -->
</div> <!-- .post-thumbnail -->
<?php endif; ?>
<div class="page-wrap container">
<div id="main-content">
<div class="main-content-wrap clearfix">
<div id="content">
<?php get_template_part( 'includes/breadcrumbs', 'index' ); ?>
<div id="left-area">
<?php while ( have_posts() ) : the_post(); ?>
<article class="entry-content clearfix">
<?php if ( ! $featured_image ) : ?>
<h1 class="main-title"><?php the_title(); ?></h1>
<?php endif; ?>
<?php
the_content();
wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'Nexus' ), 'after' => '</div>' ) );
?>
</article> <!-- .entry -->
<?php
if ( comments_open() && 'on' == et_get_option( 'nexus_show_pagescomments', 'false' ) )
comments_template( '', true );
?>
<?php endwhile; ?>
</div> <!-- end #left-area -->
</div> <!-- #content -->
<?php get_sidebar(); ?>
</div> <!-- .main-content-wrap -->
<?php get_template_part( 'includes/footer-banner', 'page' ); ?>
</div> <!-- #main-content -->
<?php get_footer(); ?>
Any help would be greatly appreciated. If you need any other files, let me know and I will paste them.
It is simple CSS problem.
The bugging element is:
<h4 class="widgettitle">Book your Cafe Style Facilitator’s Boot Camp</h4>
You can check it by giving the element block the following style:
display: none;
Also you can emulate mobile behavior in Chrome Browser using
F12 -> settings -> overrides -> emulate
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments