No sidebar on mobile theme?

Okay, just saw your site.

Add this to your stylesheet to fix the logo:

.blog-logo img {
    display: block;
    width: 85%;
}

This will resize your logo to scale with the viewport, seems to work fine for me. Adjust the percentage as needed, though anything over 90% can lead to that problem on super small screens.

Hey Dennis,

You need to add the div block:

<div class="widgets-wrapper"> 
 	<?php dynamic_sidebar('sidebar'); ?>
</div>

Before the closing content did like so:

</div> <!-- /archive-nav -->
						
	<?php endif; ?>
<div class="widgets-wrapper"> 
 	<?php dynamic_sidebar('sidebar'); ?>
</div>		
</div> <!-- /content -->

Can you check that your stylesheet is correctly enqueued? Onto chrome inspector and search for the stylesheet then open the link to view the styles. Search for the code that we added and make sure it is there. The stylrsheet you sent me looks correct, so does the index.php.

As for the logo, the code is essentially rending the image at 85% of the containing element. You may need to add in media queries and adjust that percentage based on the size of the viewport.

Hey Dennis,

Sorry for the wait! I found a solution. We will add Bootstrap to your project and then wrap the new widgets with Bootstrap columns to provide proper adjustments.

First we need to enqueue Bootstrap in your functions.php:

// Register and enqueue styles
function fukasawa_load_style() {
	if ( !is_admin() ) {
		wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
	    wp_enqueue_style( 'fukasawa_googleFonts', '//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' );
	    wp_enqueue_style( 'fukasawa_genericons', get_stylesheet_directory_uri() . '/genericons/genericons.css' );
	    wp_enqueue_style( 'fukasawa_style', get_stylesheet_uri() );
	}
}

Your code should look something like this, just search for the section titled “Register and enqueue styles” and add in the line:;
wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

Inspect your website in Chrome inspector and search for ‘bootstrap’ to make sure the CDN for Bootstrap enqueued correctly, you should see it as a stylesheet link.

Next we need to wrap the .widgets-wrapper div in Bootstrap tags like so:

<div class="container">
	<div class="row">
		<div class="widgets-wrapper">
			<?php dynamic_sidebar('sidebar'); ?>
		</div>
	</div>
</div>

Just before the closing </div> <!-- /content --> on your page.php file.

Lastly, we will add a bit of jQuery to dynamically add the col-xs-12 col-sm-3 classes to your widgets when WordPress spits them out. This jQuery should only target your .widget classes that are beneath our .widgets-wrapper div.

Add this to global.js:

$(window).load(function() {
        var viewportWidth = $(window).width();
        if (viewportWidth < 1000) {
	        $(".widgets-wrapper .widget").addClass("col-xs-12 col-sm-3");
        }
     });

You must put this before the final }); tag. The global.js page has a function that encompasses the ENTIRE file called:

jQuery(document).ready(function($) { 
    //All jQuery goes here
});

So your jQuery needs to be within this function, since it allows the $ symbol to stand for jQuery.

If you haven’t even touched the javascript in this project yet then you can copy this code and replace everything in that file if it is easier, or just use this code a reference:

jQuery(document).ready(function($) {
	
	
	//Masonry blocks
	$blocks = $(".posts");

	$blocks.imagesLoaded(function(){
		$blocks.masonry({
			itemSelector: '.post-container'
		});

		// Fade blocks in after images are ready (prevents jumping and re-rendering)
		$(".post-container").fadeIn();
	});
	
	$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

	$(window).resize(function () {
		$blocks.masonry();
	});

	// Toggle navigation
	$(".nav-toggle").on("click", function(){	
		$(this).toggleClass("active");
		$(".mobile-navigation").slideToggle();
	});
	
	
	// Hide mobile-menu > 1000
	$(window).resize(function() {
		if ($(window).width() > 1000) {
			$(".nav-toggle").removeClass("active");
			$(".mobile-navigation").hide();
		}
	});

    
	// Load Flexslider
    $(".flexslider").flexslider({
        animation: "slide",
        controlNav: false,
        smoothHeight: true,
        start: $blocks.masonry(),
    });

        			
	// resize videos after container
	var vidSelector = ".post iframe, .post object, .post video, .widget-content iframe, .widget-content object, .widget-content iframe";	
	var resizeVideo = function(sSel) {
		$( sSel ).each(function() {
			var $video = $(this),
				$container = $video.parent(),
				iTargetWidth = $container.width();

			if ( !$video.attr("data-origwidth") ) {
				$video.attr("data-origwidth", $video.attr("width"));
				$video.attr("data-origheight", $video.attr("height"));
			}

			var ratio = iTargetWidth / $video.attr("data-origwidth");

			$video.css("width", iTargetWidth + "px");
			$video.css("height", ( $video.attr("data-origheight") * ratio ) + "px");
		});
	};

	resizeVideo(vidSelector);

	$(window).resize(function() {
		resizeVideo(vidSelector);
	});
    
	
	// When Jetpack Infinite scroll posts have loaded
	$( document.body ).on( 'post-load', function () {

		var $container = $('.posts');
		$container.masonry( 'reloadItems' );
		
		$blocks.imagesLoaded(function(){
			$blocks.masonry({
				itemSelector: '.post-container'
			});
	
			// Fade blocks in after images are ready (prevents jumping and re-rendering)
			$(".post-container").fadeIn();
		});
		
		// Rerun video resizing
		resizeVideo(vidSelector);
		
		$container.masonry( 'reloadItems' );
		
		// Load Flexslider
	    $(".flexslider").flexslider({
	        animation: "slide",
	        controlNav: false,
	        prevText: "Previous",
	        nextText: "Next",
	        smoothHeight: true   
	    });
		
		$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

	});
$(window).load(function() {
        var viewportWidth = $(window).width();
        if (viewportWidth < 1000) {
	        $(".widgets-wrapper .widget").addClass("col-xs-12 col-sm-3");
        }
     });

});

Now, this should add the functionality we want. When you resize the screen below 1001px it will display our widgets at the bottom. The bootstrap columns are set to display the widgets in four columns for displays over 769px and one column with four rows for displays that are smaller, such as phones. Feel free to play around with it.

Lastly, let’s remove the lines between the widgets and adjust the margins, replace the css styling we did earlier with this updated version:

.widgets-wrapper{
	display: none;
}
@media ( max-width: 1000px ){
    .widgets-wrapper{
	display: block;
	top: 7em;
	height: 80vh;
	}
	.widget{
		margin: 1.5em 0;
	}
	.widgets:before,
	.widget + .widget:before,
	.credits:before {
		content: none;
	}
}

I find this to be a smoother layout, if you like the line spacers you’ll have to find a way to add one to the first widget, because the first widget doesn’t have one by default.

Hopes this all helps, hit me up if you have any issues.

And if you desperately want to give me a coffee, feel free to, but there is no obligation.

Regards!