Modify slider height on the 2nd and following pages of the blog. WordPress

Dbranes comments:

ps: There might be other div's inside the div.parallax_slider_outer part set with width = 750px, so you would need to target those as well.

You might also need to adjust this to the responsiveness of the theme by using custom media queries.

It's hard to say without a link to the site.

Ricard comments:

Hello Dbranes

The code seems to work, I miss the parameter “!important;”.

But there is still a problem, the heading text and buttons of the slider keeps the properties of the initial full screen slider and they doesn’t appear (both are hidden) when the slider becomes small in the second page and follows.

Is there any way to complete this code and deactivate this initial full screen in the second page and follows? Or any way to relocate the text and buttons to the correct position when the slider becomes smaller?

By the way, it doesn’t matter the exact number of pixels, I just would like to know the code which let me adapt these buttons and texts.

Dbranes comments:

How do you set the slider height, can you adjust it from the backend?

If so then you might try to override it with an "option" filter in PHP.

Regarding the CSS adjustments, you could additionally, try to target the div children, with data-height="750" (just a pure guess):

.paged .parallax_slider_outer div[data-height="750"] {
height: 500px !important;
}


or try to target the direct div children of div.parallax_slider_outer (just another guess):

.paged .parallax_slider_outer > div {
height: 500px !important;
}


Not sure about the slider text, since I don't know it's HTML structure. But something like:

.paged .parallax_slider_outer .some-text-class-to-modify {
/* some adjustments here */
}

might do the trick, where <em>.some-text-class-to-modify</em> is the class within the slider you want to target.

Then you might need some media queries:

@media only screen and ( min-width: 961px ) {

.paged .parallax_slider_outer {
/* some adjustments here */
}
}

@media only screen and ( max-width: 960px ) {

.paged .parallax_slider_outer {
/* some adjustments here */
}
}


where you have to modify the split points to your needs. Could also be mobile-first or desktop-first approach?

Ricard comments:

Hello again Dbranes,

After doing all tests the code still doesn’t works. Specifically, when I resize the browser window to a mobile or pad size, the code cuts the slider creating a “black empty space” below the slider.

On the other hand, I’ve realized that if I was able to deactivate the function “fullscreen” of the slider, it will use the first size I wrote (750px) with the buttons and texts on a correct position. So it would be great if we could deactivate this fullscreen function with CSS.

For more details, this slider (Nectar Slider) has been created using Visual Composer, which allows me to activate or deactivate this “fullscreen”. Besides, the Visual Composer includes a text field to specify the height that the slider have to take when the fullscreen function is deactivated.

The only problem is that this solution doesn’t allows me to activate the fullscreen function on the 1st page and deactivate it starting from 2nd page and next.

I insist, I’m not a professional but I think that it would be nice if we just could deactivate the “fullscreen” function from the 2nd page. The question is, how?

Dbranes comments:

I guess you use the <em>[nectar_slider]</em> shortcode? It has the <em>full_width</em> and <em>slider_height</em> attributes.

Then you could try conditional shortcodes from [[LINK href="https://wordpress.org/plugins/conditional-tags-shortcode/"]]this plugin[[/LINK]] for exmple and try:

[if is_front_page]
[nectar_slider full_width=”true” slider_height=”750” location="Some Location"]
[/if]
[if not_is_front_page]
[nectar_slider full_width=”false” slider_height=”500” location="Some Location"]
[/if]


where you can also use <em>is_paged</em>, <em>is_page</em>, <em>is_single</em> and all the other conditionals.


[[LINK href="https://www.youtube.com/watch?v=FLU9Pxo_RD8"]]Here's a video[[/LINK]] about this nectar_slider shortcode

Another approach would be to override the [nectar_slider] attributes via filter in PHP.

Ricard comments:

Big thanks for all your good suggestions Dbranes, it finally seems to work like a charm!! :)
I just hope this plug-in keeps working despites any WordPress updates.