Adjust size home block

Support Area Forums Selfie Adjust size home block

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://martyandme.com/
  • Author
    Posts
  • #22542
    Daan Vergouw
    Participant

    Hi, I’d like to adjust the size of the second Home block (so, not all the blocks) Is there an easy way or should I adjust my idea? See the website link for why I want this – you can see the example.

    Thanx! Daan
    – site is under construction

    #22550
    Bill Robbins
    Moderator

    Hello Daan,

    Great question there. It’s not something that I’ve tried before, but you’re welcome to give it a shot. Go to the Theme Options page and choose the Advanced tab. Scroll down to the Custom CSS box and add this:

    
    .window:nth-child(2) {	
    	height: 50%;
    }
    

    Replace the 50% with the height of the block you’d like to have. Then below that, add in this:

    
    .window:nth-child(3) {
    	top: 150%;
    }
    
    .window:nth-child(4) {
    	top: 250%;
    }
    
    .window:nth-child(5) {
    	top: 350%;
    }
    
    .window:nth-child(6) {
    	top: 450%;
    }
    
    .window:nth-child(7) {
    	top: 550%;
    }
    
    

    and so on for the blocks you’ll need past the second one. Essentially each block is set to be an additional 100% from the top. Since we’re changing the height of the second one to be 50% from 100% we’ll need to reduce the distance of the others by 50% so there are no gaps.

    If you have to go larger than 50%, you’ll probably have to disable the javascript that causes the window to scroll so it’s fully in frame. To do that you’ll need to go to the Appearance section in your WordPress dashboard and choose Edit. From the files on your right, choose custom-js.php and remove this section:

    
    // Window Scroll Options
    	jQuery(document).ready(function(){
    	
    	    jQuery('.window').windows({
    	        snapping: true,
    	        snapSpeed: 200,
    	        snapInterval: 500,
    	        onScroll: function(scrollPos){
    	            // scrollPos:Number
    	        },
    	        onSnapComplete: function($el){
    	            // after window ($el) snaps into place
    	        },
    	        onWindowEnter: function($el){
    	            // when new window ($el) enters viewport
    	        }
    	    })
    	
    	});
    

    Then save your changes.

    Let me know if you run into any questions or trouble.

    Have a great week,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Adjust size home block’ is closed to new replies.