Turbo Theme - Space/padding between top bar and product images (product images cropped)

New Member
2 0 0



I'm using the Turbo theme and on mobile view:

  • the product images are cropped
  • there is a lot of white space between the top bar and product images


Screen Shot 2020-06-08 at 11.49.48.png


What can I do code-wise to

  1. have not-cropped images
  2. and also to reduce the white space between the product images and the top bar/logo?


The site URL is: https://shoptrendcapsule.com/collections/pets/products/dog-nail-grinder


Thanks a lot for any help!

14 0 2



your #header .top_bar has an height of 80px, this is why there is this whole blank space at the top, you can reduce it,

and the top padding of your main container is to small, so it's hidden behind the header, you need to increaase it :)

Hope this helps!

International team available for Store creation and Theme/App development!
New Member
2 0 0

Thanks for your reply!


I already tried decreasing the height of the top bar in styles.scss and it did not work :/


@media ( max-width:768px){
  #header .top_bar{

Where can I find the top padding of the main container? 

New Member
2 0 0

This method works for Product Pages only:

- Head to Edit Code and head to the Product Page Template you are using.

- Find this section of code (usually near the first lines):

<a name="pagecontent" id="pagecontent"></a>

<div class="container main content product-name--{{ product.handle }}">
<div class="sixteen columns">
{% if collection.previous_product or collection.next_product or section.settings.product_breadcrumb %}
<div class="clearfix breadcrumb-collection">
{% if collection.previous_product or collection.next_product %}
<div class="nav_arrows breadcrumb_text">
{% if collection.previous_product %}
<a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
{% endif %}
{% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}

{% if collection.next_product %}
<a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}
{% endif %}

{% if section.settings.product_breadcrumb %}
{% include 'product__breadcrumb' %}
{% endif %}
{% endif %}


- Delete it and save

This should work, greetings.