Adjusting Banner Heights

[CSparanese]

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?

[BarryGrennan]

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

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[Anton · Accepted solution]

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

[GiantFocal]

Hi @CSparanese,

Would you mind sharing the page URL and screenshot of the banner?

Best regards,

Abraham Ernesto