Using a banner slider from the Quest website theme, how would I go about having full control over the banner height? Under module settings I’m able to see two options for banner height - normal and full height, however I’d like to have more flexibility over this aspect of the element.
Is there an easy CSS class selector or DC selector I can implement?
Hi @CSparanese,
Would you mind sharing the page URL and screenshot of the banner?
Best regards,
Abraham Ernesto
Hi @CSparanese,
if the module is editable in the design-manager you can search for the banner-height option, add a new select to it like “custom” and a number-field(“custom height”) and put this code into the module.html area
{% if module.styles.banner_height = "custom" %}
{% require_css %}
<style>
{% scope_css %}
.banner{
min-height: {{ module.styles.custom_height }}%;
}
{% end_scope_css %}
</style>
{% end_require_css %}
This might not work since the classes might not match but it should give you an idea how to accomplish this.
Another good practise can be to add a text-field(not rich-text) to the module, call it “custom class” and write the code like this:
<div class="hero {{module.custom_class}}">
...
</div>
Once this is done you can open your theme-overrides.css and put your custom class in like this:
.myClass{
min-height: 66%; {# change this to anything you like #}
}
So everytime you’ll be putting “myClass” into the text-field it will be applied
best,
Anton
Quest is a marketplace theme so the module won’t be immediately editable. You will need to create a child theme, copy the module over and create the custom fields per Anton’s instructions.
You’re also probably going to want to set a different height for mobile than for desktop, so maybe set up a second field for that and use a media query in your css.
Barry Grennan
