Docs

[newskywebsites]

Please look at this site: http://985.61f.myftpupload.com/ and go to the 2nd slider that is 3/4 page width.

Is there a way to make my Revolution Slider and the “Seamless Shower” Promo box from Cornerstone the same height regardless of screens size? I would rather have this appear as 2 elements than the way I have it with the shower overlaid on the one lard slider, but I can’t figure out how to have the heights of both the slider and promo in a row match? In other words, force the height to be the same regardless of screen size – so the Seamless Shower Coatings box would just wrap on smaller screens….

Any ideas? Latest version of everything. See attached screenshots too in case this isn’t clear…

Thanks!
Dawn

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

div#rev_slider_2_2_wrapper {
    margin-top: 0 !important;
}

.page-id-7 div#x-section-2 .x-column:nth-child(2) .x-promo {
    margin-bottom: 0px;
    max-height: 535px;
}

Hope this helps.

[newskywebsites]

I’m afraid that didn’t do anything. 🙁 See attached screenshot. Any other suggestions?

Thank you!
Dawn

[newskywebsites]

I’m sorry, I was wrong. I realize now that the code you gave me forces the height of the promo box to stay set. However, the text inside the promo box isn’t responsive, so it stays large and cuts off as the width of the box changes and the content becomes too large. Also, I set the Revolution Slider to match the height of the promo box regardless of screen size and that’s causing issues too. Maybe there’s a better way to have this layout? I’m open to ideas…?

Thanks for your help. See attached screencast:
[video src="https://dl.dropboxusercontent.com/u/36509858/Recording%20%2310.mp4" /]

Thanks!
Dawn

[Rupok]

Hi Dawn,

What you are trying to achieve is pretty unusual. If you force this then the usual responsiveness will break and it won’t look good in all screen size. I’d suggest to keep this as is as this looks much better. If you still want to do this, let’s try settings max-height, min-height for them as shown on previous example.

Thanks!

[Author]

Posts