Docs

[NicoleOhlmann]

Hi there,

I want to decrease the hight of the revolution slider on my home page. I tried the steps that are suggested here: https://community.theme.co/forums/topic/cannot-change-the-height-of-revolution-slider/#post-736042

Unfortunately, now the text of the following section moves up (into the slider), but does not take the colour in the background with it. Do you have any idea, how I can fix that?

The website is: http://moveonmotortrainingen.nl/

[Friech]

Hi There,

Thanks for writing in! Adjust the Layer Grid Size option manually on the slider settings. You can define the size (probable the height) of your slider on desktop, and let the other screen to auto so it would be responsive to smaller screens.

http://prntscr.com/baljyq

Hope it helps, Cheers!

[NicoleOhlmann]

😀 … I cannot belief that I didn’t recognised that one. I saw it already a hundred times. Thanks a lot, Friech! Works like a charm!!

I have now a white bar between the slider and my text field. Do you have any idea how I can get rid of that? http://moveonmotortrainingen.nl/

Many thanks again!!!!

[Christopher]

Hi there,

Please add pbn in section #1 class field.

Thanks.

[NicoleOhlmann]

Hi Christoper, many thanks. You guys are really awesome! Best support ever.

I have one last question for now: The text in the blue area remains stucked on the bottom. I changed the padding of the section, column and row, but nothing seems to work. Any idea?

Warm regards,
Nicole

[Joao]

Hi Nicole

You can add the class man to your Custom Headline Element.

You will find the class box just above the style box on the bottom of your Element.

Please see image 1 attached.

After you can adjust the padding of your section according to your wishes.

Please see image 2.

Hope that helps,

Joao

[NicoleOhlmann]

Hi Joao, thanks for your quick reply. I did what you said, but unfortunately it only moves the entire blue area down, but adds no padding. Any ideas?

Warm regards,
Nicole

[Jade]

Hi Nicole,

Do you aim to get rid of the space between the slider and the text area with the blue background in it? If so, kindly change the value of the section’s padding. Currently, it is set to 20 for the top and bottom padding and 0px to the left and right padding. Please change 20 to 20px to make sure that the value works. You either set it to zero and some other value if you need to do some adjustment.

Let us know how it goes.

[NicoleOhlmann]

Hi Jade, thanks for your reply. Indeed, I would like to remove the white space between the slider and the blue field. Additionally I would like to add some top and bottom padding in blue field itself.

I did what you said, but nothing changes.

Warm regards,
Nicole

[Jade]

Hi Nicole,

It’s getting there. If you want to completely remove the white space then simply set the padding of the section to 0 instead of 20px. The small white space that is currently there is the 20px padding. Then to add some padding to the blue content area, edit the column‘s style field to padding: 30px; background-color: rgb(92, 155, 219);

Hope this helps.

[NicoleOhlmann]

Hi Jade, it’s getting there indeed. 😀 Thanks a lot for your support. It worked perfect.

Meanwhile I got another question: I want to change the font in the blue text field to Homemade Apple. It is a Google Font and it is in the system. I used a custom headline with level h6.

However, if I add the custom CSS (see below), nothing changes.

h6,
.h6 {
font-family: ‘Homemade Apple’;
font-size: 100%;
text-transform: none;
font-size: 200%;
font-weight: normal;
}

Do you have any idea what the issue might be?

Warm regards,
Nicole

[Jade]

Hi Nicole,

I can’t seem to see the font loaded on the site yet. Kindly try to add this code at the top part of the CSS customizer:

@import url(https://fonts.googleapis.com/css?family=Homemade+Apple);

Hope this helps.

[NicoleOhlmann]

Hi Jade, I added the code at the top of the Global CSS Code, but it doesn’t seem to work. Are there any other options?

Warm regards,
Nicole

[Jade]

Hi Nicole,

Try adding this in Custom > JS:

WebFontConfig = {
    google: { families: [ 'Homemade+Apple::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

If that still does not work, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please add this code in the functions.php file of the child theme:

add_action( 'wp_head', 'load_font' );

function load_font() {
?>
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
<?php
}

Hope this helps.

[NicoleOhlmann]

Many many thanks. The first option worked!!!

Have a great day!
Nicole

[Author]

Posts