Reducing the size of slider header

Davidshkim.com.

I would like to have my introduction paragraph to appear in one screen with the header sLider. I know the slider is set as full size so it just fits to edges regardless, but is it possible to set it up rather as image background (reduced size) on homepage and add the same maintitle typed on it? Thank you.

Please follow my reply on your previous thread. Does it work for you?

Regards,
Kharis

The link you provided for previous thread is for a different issue (mobile screen optimization).
This thread is asking if I could reduce the size of the header slider to about 75% of screen so that my introduction appears on the homepage in the same screen when I load it.

I would like to apologize in advance for misunderstanding. Please try this solution.

Regards,
Kharis

I’ve tried installing the Custom Javascript plugin and putting in the code. It still doesn’t seem to work. Please advise.

Hello there,

As alternative solution, try to use the following CSS code instead.


.header-slider {
  height: 50vh !important;
}

50vh equals to 50% of the screen’s height. For comprehensive technical explanation, read on here.

To apply additional CSS code to your site, add that code into Appearance > Customize > Additional CSS.

Regards,
Kharis

For Desktop 82vh is good for my site & for mobile 50vh. Please help!
I need to add both for both devices.

Hello there,

You can use CSS media query to apply special style on specific screen size.

For example, for desktop:

    @media only screen and (min-width: 1025px) {
      .header-slider {
        height: 50vh !important;
      }
    }

For tablet:

    @media only screen and (max-width: 1024px) {
      .header-slider {
        height: 50vh !important;
      }  
    }

For other smaller mobile screen:

    @media only screen and (max-width: 760px) {
      .header-slider {
        height: 50vh !important;
      }
    }

Regards,
Kharis

I have one more change request. In the home-page, the header overlaps the slider image. Instead, I want the header and image to be separate. I need it to be header -> slider image -> body, instead of header overlapping the slider image. Will you please help me with this?

@kharisblank

I have one more change request. In the home-page, the header overlaps the slider image. Instead, I want the header and image to be separate. I need it to be header -> slider image -> body, instead of header overlapping the slider image. Will you please help me with this?