Reduce height of slogan (quote) segment

[allanhalme]

Hi, how could I reduce the height of a slogan segment (quote)? I just want the vertical height of the displayed page section to be less than what the theme defaults to. Thanks!

[Nexus]

Please put the following code into custom css in theme options.

#slogan .segment {
padding: 30px 0;
}

Hope that helps. Thanks!

[allanhalme]

thanks but that’s not affecting the style

with chrome web developer tools, it looks like the slogan section is defined by this

media=”all”
.segment.slogan {
padding: 205px 0;
padding-top: 205px;
padding-right: 0px;
padding-bottom: 205px;
padding-left: 0px;
}

but the code you ask to put in the custom css section doesn’t seem to be affecting this

[Raghavendra]

Looks like we sent the code for another section – the one which says ‘Bold and Flat theme’. Can you pls input the following Custom CSS and see if that helps –

.segment.slogan {
padding: 100px 0; /* Vary the padding for greater or lesser height */ 
}

[allanhalme]

It seemed to work now. I could set top and bottom padding to 100px and the slogan narrowed nicely:

.segment.slogan {
padding: 100px 0 100px 0; /* Vary the padding for greater or lesser height */ 
}

However, when the slogan narrows, it does not maintain the background parallax image vertically centered. That is, when the slogan section is now not so high, it is showing the upper part of the background image, but I would like the background image to also remain centred.

is that possible? thanks.

[Raghavendra]

I would like to have a look at the actual page to decide on the exact code which can achieve this. We can use media queries to change the height (padding) so that the image remains centered to the extent possible. Will need to reduce the text size as well. Can you pls post a private message with a link to the page. Thanks!

[Author]

Posts