ALtitude Front Page Size Reduction

[Derek]

Hello,

I was wondering how I would change the size for the Front Page backgrounds. In the widget section there's Front Page 1-7, but lets say I want to reduce the space in Front Page 4, how can I do this?

[Davinder Singh Kainth]

That space above and below for all sections on homepage is coming from padding in this class

.flexible-widgets {
    padding-bottom: 60px;
    padding-top: 100px;
}

To reduce vertical space only in this section, you can add following code to style.css file.

.front-page-5 .flexible-widgets {
    padding-top: 20px;
    padding-bottom: 20px;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Derek]

Davinder, you come to the rescue once again my friend. I appreciate the response and will try to execute this. I should be fine, and if not I'll reopen this but it should be straight forward.

I see now the new type of wordpress I need to tackle. I use to just do into editor with each theme and edit the .phh files. Now I see I need to add snippets of code in order to achieve what I want. Anyhow, thanks for the top amigo.

All the best,

-Derek

[Derek]

Hey Davinder,

Alright, so I applied this to both the "Edit Css" section and the style.css. Seems that it doesn't make any changes :/. Do you have a clue as to why the webpage is not responding to the change?

Thanks again for your efforts!

-Derek

[Davinder Singh Kainth]

You only need to make change in style.css file.

Can you share your website url for more targeted support?

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[carasmo]

I looked at this site and jquery is making the "pages/sections" the height of the viewport on resize/load. Everyone's viewport is different, so this is an important feature. I see it very big, some on smaller viewports, such as laptops, wlll see less, and so forth, but provided that the content of the page/section doesn't exceed the height, then the design will look great. One page site designs like this are nearly always set up this way and it's integrated with the all the other sections, so changing one changes them all, you might not like the way it turns out.

---

Genesis Theme Customization and Help

[Derek]

Hi Davinder,

Sorry for the late reply!

So I did try to put the code at the bottom of the style.css, however, it doesn't do any good :/. It's if the website is ignoring this code. My website is here: website (for indexing purposes).

Let me know your thoughts!

-Derek

[Derek]

Thanks Carasmo for the input. I sort of understand what you're saying, and because it's a responsive page the layout will look different. But the thing is that I don't need such a big space in this section, and it will be reflective on any device. so surely there must be a way to decrease the px (size) of the Front Page sections, but I guess I'll have to wait and see :).

[Davinder Singh Kainth]

Have you tried reducing padding in the following code?

.flexible-widgets {
    padding-bottom: 60px;
    padding-top: 100px;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[carasmo]

This theme is using using js to make the page height the window height:

The code is in the home.js on lines 14-25 = wp-content/themes/altitude-pro/js/home.js

All sections will be affected if you change this. It has nothing to do with padding or margin. Below is the js and I've added comments so you can understand

	// Image Section Height
	var windowHeight = $( window ).height();
        // --> get the window height on doc ready

	$( '.image-section' ) .css({'height': windowHeight +'px'});
        // ---> Make this class the height of the viewport on doc ready		

	$( window ).resize(function(){
	
		var windowHeight = $( window ).height();
	
		$( '.image-section' ) .css({'height': windowHeight +'px'});
                // ---> Make this class the height of the viewport on resize
	
	});

These are the affected areas WITHOUT js.

Comment out the lines 14-25 and you will get shorter areas everywhere. Unless you go in to assign different classes and change / re-write the js for only specific classes or ids.

---

Genesis Theme Customization and Help

[Derek]

Thanks for your help Davinder and Carasmo. I appreciate your inputs and it's helped me decide what I had to do. Too bad the theme isn't as flexible in this regards, but nonetheless a beautiful theme.

All the best!

Regards,
-Derek

[Author]

Posts