Arranging photos in a vertical position in CommerceHQ platform - css

Question

I'm having some problem with my theme for my e-commerce store. Currently, the product images are aligned in a carousel form. (One large main image, 3-5 thumbnails images below in carousel form)
I'd like to change this to show all photos in same sizes but vertically (top to bottom)
This is my code, how do I change it? I've read stuff online and tried making changes but nothing is happening. Please help.
{{ set(this, 'title', product.seo_title) }}
{% set mainStyles = load.get( loadQuery.cms_items("main-styles", {limit: 50}) ) %}
{% set buttonText = mainStyles[0].settings["Add to cart button text"]|default('Add to Cart') %}
{% set buttonColor = mainStyles[0].settings["Add to cart button color"]|default('inherit') %}
{% set maxRelatedProducts = mainStyles[0].settings["Number of rows for related items"]|default(1) * 3 %}
{% set quanSelector = mainStyles[0].settings["Quantity selector on product page"] %}
{% set imageCrop = mainStyles[0].settings["Product thumbnail aspect ratio"]|default('Smart crop') %}
{% if imageCrop == 'Wide' %}
{% set imageCrop = 'wide' %}
{% elseif imageCrop == 'Tall' %}
{% set imageCrop = 'tall' %}
{% endif %}
<div class="page product" data-productid="{{ product.id }}">
<div class="container">
<div class="col-sm-7">
<div class="fotorama"
data-width="100%"
data-arrows="false"
data-loop="true"
data-autoplay="false"
data-thumbwidth="113"
data-thumbheight="113"
data-thumbborderwidth="4"
data-thumbmargin="5">
{% if product.mainImage %}
<a href="{{ product.mainImage.getImageSize("jumbo") }}">
<img src="{{ product.mainImage.getImageSize("jumbo") }}">
</a>
{% endif %}
</div>
<div class="product-no-image{% if product.mainImage %} hidden{% endif %}">
<img src="/img/icons/image.svg">
</div>
<div class="hidden-xs">
<hr>
{% set relatedProducts = campaign.recommendations({ "product_id": product.id, "limit": maxRelatedProducts }) %}
{% if relatedProducts|length %}
<div class="row related items-grid">
<div class="col-sm-12">
<div class="block-title">
<h3>Related products</h3>
</div>
<div class="items">
{% for product in relatedProducts %}
<div class="col-sm-4 col-xs-6 item {{ imageCrop }}">
<a href="{{ site_path(product.url) }}">
{% if product.mainImage %}
<div class="image"
style="background-image: url('{{ product.mainImage.getImageSize("medium") }}');"></div>
{% else %}
<div class="image empty"></div>
{% endif %}
<p class="title">{{ product.title }}</p>
<p class="price">
{{ product.defaultPrice | currency }}
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-sm-5">
<div class="product-head">
<h2>{{ product.title }}</h2>
<p class="price">
<span id="price">{{ product.price | currency }}</span>
<span class="compare">
<span id="compare-price">{{ product.compare_price | currency(NULL, {"force_prefix_symbol": true}) }}</span>
</span>
</p>
{% if product.variants %}
<div class="variants">
{% for variant in product.allVariants %}
<div class="item">
<span class="label-heading">{{ variant.variant }}</span>
{% if variant.selectorType == "dropdown" %}
<div class="select2">
<select data-variant="{{ loop.index0 }}"
class="product-{{ variant.variant|preg_replace('/[^a-zA-Z0-9]/')|lower }}-select product-select"
title="">
</select>
</div>
{% else %}
<div class="product-colors product-{{ variant.variant|preg_replace('/[^a-zA-Z0-9]/')|lower }}-round">
{% for option in variant.variantOptions %}
<button type="button"
data-variant="{{ loop.parent.loop.index0 }}"
data-option="{{ option.option|preg_replace('/[^a-zA-Z0-9]/')|lower }}"
class="btn-rounded product-color"
style="{% if option.thumbnail.image %}background-image: url('{{ option.thumbnail.imageUrl }}');{% else %}background-color: {{ option.thumbnail.color }}{% endif %}"></button>
{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if quanSelector %}
<div id="quantity-selector" class="quantity">
<span class="label-heading">Quantity</span>
<input type="number">
<button class="down"></button>
<button class="up"></button>
</div>
{% endif %}
{{ system.getApp('ProductCustomizer', {'product_id': product.id} ) }}
<button class="btn" id="buy-it-now"
style="background-color: {{ buttonColor }}">{{ buttonText }}</button>
{{ system.getApp('SecurityBadge', {} ) }}
{{ system.getApp('QuantityLeft', {'product_id': product.id} ) }}
{{ system.getApp('Timer', {'product_id': product.id}) }}
</div>
{% if product.textareaModels %}
<div class="panel-group descriptions" id="accordion" role="tablist" aria-multiselectable="true">
{% for textarea in product.textareaModels %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="section-heading{{ loop.index }}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion"
href="#section{{ loop.index }}"
aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}"
aria-controls="section{{ loop.index }}">
{{ textarea.name|raw }}
<span class="icon__state"></span>
</a>
</h4>
</div>
<div id="section{{ loop.index }}"
class="panel-collapse collapse{% if loop.index == 1 %} in{% endif %}" role="tabpanel"
aria-labelledby="section-heading{{ loop.index }}">
<div class="panel-body">
<div class="typography">{{ textarea.text | raw }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="visible-xs">
{% set relatedProducts = campaign.recommendations({ "product_id": product.id, "limit": maxRelatedProducts }) %}
{% if relatedProducts|length %}
<div class="row related items-grid">
<div class="col-sm-12">
<div class="block-title">
<h3>Related products</h3>
</div>
<div class="items">
{% for product in relatedProducts %}
<div class="col-sm-4 col-xs-6 item {{ imageCrop }}">
<a href="{{ site_path(product.url) }}">
{% if product.mainImage %}
<div class="image"
style="background-image: url('{{ product.mainImage.getImageSize("medium") }}');"></div>
{% else %}
<div class="image empty"></div>
{% endif %}
<p class="title">{{ product.title }}</p>
<p class="price">
{{ product.defaultPrice | currency }}
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
</div>
<div class="row">
<div class="col-sm-12">
{{ system.getApp('Reviews', {'product_id': product.id} ) }}
</div>
</div>
</div>
</div>