Widget Size

Support Area Forums Responsive Visual Widget Size

This topic contains 5 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://
  • Author
    Posts
  • #26700
    Carl
    Carl
    Participant

    I expanded the front image on the page to 1200 (i believe) after following one of your support tickets, I want to match the widgets to that same size, is that possible?

    #26713

    Bill Robbins
    Keymaster

    Hey Carl,

    It should be possible to change that height to match. Can I see the site so I can send over the correct instructions?

    Bill

    #26748

    Bill Robbins
    Keymaster

    Thanks for the link. It looks like the widget panel is already the size of the larger size (see attached screenshot). I thought you were looking for how to make the overlay panel the same height as the new larger slideshow. Are you looking for something else?

    #26750

    Bill Robbins
    Keymaster

    Stupid image didn’t attach. Here’s what I’m seeing:

    #26753
    Carl
    Carl
    Participant

    sorry, check now. It is below that picture frame

    #26755

    Bill Robbins
    Keymaster

    Hey Carl,

    You can make that area larger. Add this to your Custom CSS:

    
    @media only screen and (min-width: 1250px) {
    
    	.lower-sidebar {
    		width: 1200px;
    		padding: 0;
    		margin: 30px auto;
    	}
    	
    	.lower-sidebar aside {
    		width: 286px;
    		margin: 17px;
    	}
    
    }
    

    What that won’t do though is make the widgets wider. To do that, you’ll need to edit the custom-js.php file and remove this section:

    
    // Masonry
    	jQuery(function(){
    		var $jcontainer = jQuery('.lower-sidebar');
    		$jcontainer.imagesLoaded( function(){
    			$jcontainer.masonry({
    				columnWidth: 320, 
    				itemSelector: '.widget' 
    			});
    		});	
    		
    		var $pod = jQuery('ul.podcast-list');
    		$pod.imagesLoaded( function(){
    			$pod.masonry({
    				columnWidth: 480, 
    				itemSelector: 'li.podcast' 
    			});
    		});	
    	});
    

    which applies masonry to the widgets there so they’ll line up nicely if they different heights. Once that’s turned off you can use the width and margin in the snippet above to change the width and spacing of the widgets for the larger screen size.

    Take care,
    Bill

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Widget Size’ is closed to new replies.