A few spacing and responsive quirks

[Kelly Wildman]

First and foremost, thanks for the great theme! I work with premium templates A LOT and this one is extremely easy to customize and implement!

A couple of issues I am having:

1. I have made some CSS changes (in a child theme) to the widget boxes at the bottom of the homepage. Unfortunately, the client has TWO locations, so the existing location/hours/googlemap scenario was not going to work. I now have three widget boxes at the bottom. I changed the width of the first and third boxes (from left to right) to make it a bit narrower. But now, I seem to have spacing issues with the second widget box (too far to the right). Looking at the code, it appears that my CSS is being “trumped” by the following element.style:

element.style {
left: 334px;
position: absolute;
top: 0;
}

I would prefer that it be left: 225px;

Could you let me know where (or what file) I could adjust this setting?

2. When viewing certain pages on the website with mobile devices (smart phone), I noticed that pages with a lot of content, such at the page at: http://adpizza.com/wordpress/pizza-combos/ display a VEEEEERRRRYYY long sidebar at the bottom of the mobile device. It seems as if a “wrapper” is forcing the sidebar to display as equally long as the content…creating a sizable gap between the last element of the sidebar and the actual page footer. Any idea how to keep this from occurring?

Thanks so much!

[Bill Robbins]

Hello Kelly,

Thank you for your business. I’m glad to hear you’ve had a good experience with the theme so far.

Good questions too. I believe we can take care of both of those with a bit of editing. Here’s what to change.

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose custom-js.php
3. For the home page spacing, find this section:

   
   <?php if ( is_page_template( 'page-home.php' ) ) { ?>
   	
   	// Masonry for Home page widgets
   		var $container = jQuery('#home-middle');
   			$container.imagesLoaded(function(){
   			$container.masonry({
   				itemSelector	: '.widget',
   				gutterWidth		: 21,
   				columnWidth		: 292
   			});
   		});
   		
   <?php } ?>
   

   and remove it. That’ll turn off the masonry from the home page. I believe that’s what’s causing the trouble there.

4. For the sidebar height, you can take this out too:

   
   // Equal column heights on inside pages
   	jQuery('body').imagesLoaded( function() {
   	  var leftHeight = jQuery("#content").height();
   	  var rightHeight = jQuery("#sidebar").height();
   	      if (leftHeight > rightHeight){ jQuery("#sidebar").height(leftHeight + 30 )}
   	         else{ jQuery("#content").height(rightHeight - 25 )};
   	})
   

5. Save your changes.

That should cause the sidebar to have a normal height based just on it’s content and also allow you to make CSS changes to the home page widgets.

If you run into trouble, let me know.

Thanks again,
Bill

[Kelly Wildman]

Hey Bill _

Thanks a TON for the code instructions. You rock! My sense was that it concerned a js situation (usually this is where element.styles are formatted)…just couldn’t find it! THANK YOU!

However, removing the equal column heights exhibits issues that I am unable to rectify. Currently, the side bar no longer extends to the height of the page based on the content (left hand side). I’ve tried just about everything I can think of, even tried to implement pseudo classes and nothing seems to change. The sidebar still renders only the height of what is included in the sidebar content. My hope is that it would automatically adjust (on desktops) to the height of the content on the left. 🙁 I even tried “wrapping” the content and sidebar in an additional “wrapper”, but that didn’t work either.

Any ideas? Thanks a million!

Best,

Kelly

[Bill Robbins]

Hello Kelly,

We do have to use javascript to keep those columns even. Try using this instead of the second snippet you removed yesterday:

// Equal column heights on inside pages
	jQuery('body').imagesLoaded( function() {
		var leftHeight = jQuery("#content").height();
		var rightHeight = jQuery("#sidebar").height();
		var documentWidth = jQuery(document).width();
		
		
		if (documentWidth > 767){
			if (leftHeight > rightHeight){ jQuery("#sidebar").height(leftHeight + 30 )}
			   else{ jQuery("#content").height(rightHeight - 25 )};
		};
		  
	})

That won’t affect the sidebar height when you resize the browser, but it will keep the sidebar and content area from being equal height on browser windows that start out as smaller than 768 pixels wide. That’s the point at which the sidebar moves under the content area.

Let me know if you run into trouble there,
Bill

[Kelly Wildman]

Bill –

Yes, yes, yes!! That is PERFECT! Thank you so much! Your help has been invaluable and I really appreciate it. Such GREAT service.

Many, many thanks,

Kelly

[Bill Robbins]

Fantastic. Gave a great day and let me know if you need anything else.

[Author]

Posts