Using wagtail(django) I created a carrousel that serves all my media content. The user can select 1-3 columns (three templates accordingly), which displays a carousel if media content >1, else only the image/video.
As for the 2-3 columns display can be small for some, I added a FullScreen toggle button, if the user wishes to.
This works well... almost as I have two issues with passing wagtail blocs into CSS/JS loops:
Fullscreen toggle buttons. If the block has more than 2-3 carousels not all will function.
Ex: With 3 carousels, one per column, only the right and the left one are clickables.
With 6 carousels (2*3 block), only the left ones and the upper central one are clickable).
How should I pass the JS script to the given button (with some kind of _{{ block.id }}...??) so the carousel full screen buttons can be attributed to the specific instance?
Indicators : The indictors are displayed properly, until the second slide is activated. Then, the indicator of the first slide appears in the boostrap default style. The other slides function as expected with their override style and hover-color for the active element.
I tried to add condition {% elif forloop.counter == 0/2/-1 %} neither worked.
Any advise on how to make it function?
Here's my code:
carousel_block.html
and in case you find it useful, here's the block templates.
three_columns_block.html
single_column_block.html
For the sake of brevity, I didn't add the stream_field.html which populates the carousel data in the columns templates. Kindly advised if needed.
Any input, consideration is highly appreciated.
carousel_block.html
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags %}
<head>
<!--I added the head as I didn't know how to pass only links and scripts from the base.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<style>
.carousel-item {
object-fit: cover;
object-position: center!important;
min-height: 50vh;
overflow: hidden;
vertical-align: middle!important;
}
.carousel-indicators li.dactive, .carousel-indicators li.active {
width: 11px;
height: 11px;
border-radius: 50%;
margin: 2px 4px;
border: 2px solid black;
}
.carousel-indicators li {
border: 1px solid #475c6f;
}
.carousel-indicators li.active {
background: #20b0b9;
border-color: #20b0b9;
}
#myDiv.fullscreen{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
}
.but {
top:0;
left:0;
position: absolute;
background-color: #f5f;
z-index: 9999;
}
#myDiv{background:#fff;}
</style>
</head>
<article>
<div class="row">
<div class="">
<div id="myDiv">
{% if block.block_type == 'carousel' %}
{% if block.value|length > 1 %}
<div id="carouselExampleIndicators_{{ block.id }}" class="carousel slide zoom" data-bs-ride="carousel">
<ol class="carousel-indicators">
{% for item in block.value %}
<li data-bs-target="#carouselExampleIndicators_{{ block.id }}"
data-bs-slide-to="{{ forloop.counter0 }}" aria-label="Slide {{ forloop.counter }}"
{% if forloop.counter == 1 %} class="active" aria-current="true" {% else %} class="dactive" {% endif %}>
</li>
{% endfor %}
</ol>
{% endif %}
<div class="carousel-inner">
{% for item in block.value %}
<div class="carousel-item{% if forloop.counter == 1 %} active{% endif %}">
<div class="d-block w-90">
{% if item.block_type == 'image' %}
{% image item.value.image original as img %}
<img src="{{ img.url }}" alt="{{ img.alt }}">
{% if item.value.caption %}
<div class="carousel-caption d-none d-md-block overlay1 neonText">
{{ item.value.caption }}</div>
{% endif %}
{% elif item.block_type == 'video' %}
{{ item.value }}
{% endif %}
</div>
<button type="button" class="btn btn-default but btn-sm">
<span class="glyphicon glyphicon-fullscreen"></span> Fullscreen
</button>
<i class="bi bi-fullscreen"></i>
</div>
{% endfor %}
</div>
{% if block.value|length > 1 %}
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</article>
<script>
$('button').click(function(){
$('#myDiv').toggleClass('fullscreen');
});
</script>
single_column_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col zoom-none">
{% for block in self.single_column %}
<div class="card mb-md-3 single">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>
three_columns_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col-md-4">
{% for block in self.left_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.middle_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.right_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>
Related
I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}
I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?
I'm using HTML and TWIG.
I have different boxes with different fields filled with data retrieved from a php call. The problem is I don't know how to make those fields (and consequently boxes) the same size.
The size of each field should be the tallest one of the group. So far I got this
As you can see, Contratto, JSer and Azienda are fine (usually always on a single line, so it shouldn't be a problem).
The problem is Note: as you can see, it goes well for single box, but having more ones just break the visualization. I'd like all fields to be the same size in their own group:
every Contratto the size of the biggest one;
every JSer the size of the biggest one;
every Azienda the size of the biggest one
and of course, the important one, every Note the size of the biggest one
Here's the code I'm using, with Bootstrap 3.3.7
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<p><b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}</p>
<p><b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}</p>
<p><b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}</p>
<p><b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
EDIT: this is the code version with columns and rows
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
</div>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
Any suggestion?
EDIT ANSWER:
After few tries, I normalized the single row instead of single fields...single fields would not be the same height, but the row will, so this is actually fine for my final result. Here's the answer:
//CSS in head
.alertProperties {
padding-left:0px !important;
}
//Code
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
{% if loop.index % 5 == 0 or loop.first %}
<div class="row">
{% endif %}
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="box-header with-border"><h3 class="box-title" style="color: #ff000f">Avviso</h3></div>
<div class="box-body" style="border-left: 1px solid #00ACDF !important">
<div class="col-sm-12 alertProperties">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
<div class="col-sm-12 alertProperties">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align:left;">
<div class="col-sm-12 alertProperties">
<b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}
</div>
</div>
{% endif %}
<div class="box-footer">
<div class="col-sm-12">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
{% if (loop.index % 4 == 0 or loop.last) %}
</div>
{% endif %}
{% endfor %}
</div>
{# </div> #}
</div>
{% endif %}
You can truncate text of the note section by forcing text on the same line with the white-space:none
p{
width:400px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
However if you wanna truncate it to more than one line you can read it more on chris coyier's article here
UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>
I am trying to customize my shopify store's header-bar by adding small links on the left side of the shopping cart icon at the very top of the page.
Here's a quick example i got from http://www.homedepot.com/ of what i am looking to do.
" Tool & Truck Rental | Installation Services and Repair| Gift Cards | Help" links on left side of the small shopping cart/checkout icon.
That is exactly what I am trying to do with my page but the links i created are not horizontal (even after trying CSS display:inline) and making the shopping cart icon move out of it's proper place.
This is what i have tried.
I added a Snippet called "header-bar-nav.liquid" with code:
<ul class="header-bar-nav" id="AccessibleNav">
{% for link in linklists.header-bar.links %}
{% comment %}
Create a dropdown menu by naming a linklist the same as a link in the parent nav
More info on dropdowns:
- http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
{% endcomment %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="header-bar-nav--has-dropdown{% if link.active %} header-bar-nav--active{% endif %}" aria-haspopup="true">
<a href="{{ link.url }}" class="header-bar-nav__link">
{{ link.title }}
<span class="icon-fallback-text">
<span class="icon icon-arrow-down" aria-hidden="true"></span>
</span>
</a>
<ul class="header-bar-nav__dropdown">
{% for childlink in linklists[child_list_handle].links %}
<li{% if childlink.active %} class="header-bar-nav--active"{% endif %}>
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li {% if link.active %}class="header-bar-nav--active"{% endif %}>
{{ link.title }}
</li>
{% endif %}
{% endfor %}
</ul>
And I did a {% include 'header-bar-nav' %} in the actual "header-bar.liquid" (which is where i would like the small links to be)
<div class="header-bar">
<div class="wrapper medium-down--hide">
<div class="large--display-table">
<div class="header-bar__left large--display-table-cell">
{% if settings.header_message != blank %}
<div class="header-bar__module header-bar__message">
{{ settings.header_message }}
</div>
{% elsif cart.announcements.size > 0 %}
<div class="header-bar__module header-bar__message">
{{ cart.announcements.first }}
</div>
{% endif %}
</div>
{% include 'header-bar-nav'%}
<div class="header-bar__right large--display-table-cell">
<div class="header-bar__module">
<a href="/cart" class="cart-toggle">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
{% if shop.customer_accounts_enabled %}
<span class="header-bar__sep" aria-hidden="true">|</span>
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
{{ 'layout.customer.account' | t }}
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
{% endif %}
</ul>
{% endif %}
{% if settings.header_search_enable %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="wrapper large--hide">
<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
<a href="/cart" class="cart-toggle mobile-cart-toggle">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
{% include 'mobile-nav' %}
</div>
And I used the .header-bar-nav class and added a CSS to the timber.scss.liquid under "Assets"
.header-bar-nav {
font-size: em(16px);
cursor: default;
margin: 0 auto;
text-align: center;
li {
margin: 0;
display: block;
}
& > li {
position: relative;
display: inline-block;
&:first-child .header-bar-nav__dropdown {
left: - $gutter / 2;
}
&:last-child > a {
padding-right: 0;
}
}
#include at-query ($min, $large) {
margin: 0;
text-align: right;
}
}
.header-bar-nav__link {
display: block;
text-decoration: none;
padding: $gutter / 2;
white-space: nowrap;
color: $colorNavText;
&:hover,
&:active,
&:focus {
color: $colorPrimary;
}
.icon-arrow-down {
font-size: 0.7em;
color: $colorPrimary;
}
}
For some reason, It has not been working for me. Please, if anybody can help it would be greatly appreciated.
Easiest way to accomplish it is fire up Chrome, go to Dev Tools and add stuff manually.
Then try whatever CSS makes it work. If the theme's responsive, make sure it works when you resize the browser window.
Once you find what you're looking for, just copy those styles/CSS into your theme.
This really doesn't have anything to do with Shopify, but is a CSS question. If you are still unable to make it work, post it in CSS with a link to your website and someone there will help you out.