Move Dazzling widgets on mobile above the content

Hello,

I’m using Dazzling theme for a WooCommerce e-shop based site, and I noticed one serious flaw which this theme have when site is accessed from a mobile phone. I hope you can help me to solve this.

This is the detailed description of the issue I have encountered:

On my web site, left sidebar is enabled on all site pages. In that sidebar I have from top to the bottom:

  1. Widget: WooCommerce Product Search
  2. Widget: WooCommerce Cart
  3. Widget: WooCommerce Product Categories

When site is accessed from a desktop computer, sidebar is on the left side and everything is just fine, bu when the site is accessed via a mobile phone (or any device that has the screen resolution narrower then 1000px), sidebar falls down, below the content. That is serious flaw for mobile visitors navigation, they must to scroll down entire site content to find search, cart and categories.

My question is, is it possible to somehow put this 3 widgets above the site content for mobile visitors?

I really appreciate any help you can provide.

Regards

Hi @Milos Spasic,

I hope you are well today and thanks for posting here.

This is not the flaw but it’s by design.

In small screen sizes we can’t display sidebar side by side to the content so we have to move top or bottom of the page content.

We have moved it to the bottom of the page content as the sidebar contains information which is not that much important than the page content.

But if you still want to display it at the top of the page content then you can achieve this by adding the attached modified page.php file in the root directory of your child theme.

Best Regards,
Movin

Hey there, the firewall disabled the download. Any chance to still get the modified file?

Thanks!

Hi @tschiggi,

You can just create the page.php file in your child theme with the following modified code.

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package dazzling
 */

get_header(); ?>
<?php get_sidebar(); ?>
<div id="content" class="site-content container">
	<div id="primary" class="content-area col-sm-12 col-md-8 <?php echo of_get_option( 'site_layout', 'no entry' ); ?>">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php
					// If comments are open or we have at least one comment, load up the comment template
					if ( comments_open() || '0' != get_comments_number() ) :
						comments_template();
					endif;
				?>

			<?php endwhile; // end of the loop. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Hi @Movin,

thanks for the snippet. Using it for Activello let’s all the main content disappear. Is it adaptable?

Thanks!

Hi @tschiggi,

I am not sure what you meant by “let’s all the main content disappear”.

Could you please describe it a bit more in detail so that i can help you?

To help keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/dazzling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Movin