How can I adjust the top padding of the product listing?

[Kylara]

Hi!

I would like to remove the padding of the product information box. So the breadcrumbs could come closer to the picture. I am using Dawn theme. I tried to do something with chatgpt and css but I think I didn't find the right DIV. 

Store is Kylara.com

Thanks in advance!

[niraj_patel]

Hello @Kylara 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .section-template--15907263610949__main-padding {
        padding-top: 0 !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Huptech-Web · Accepted solution]

Hello! @Kylara Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

.section-template--15907263610949__main-padding {
    padding-top: 0 !important;
}
@media (max-width: 480px) {
    .breadcrumb {
        padding: 10px 15px;
        font-size: 14px;
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[Kylara]

Thank you it worked!

Can you also help me get rid of the little line between the heading and the breadcrumb? 

And when the name of the product is too long, in the phone version it goes to the next line. How can I keep all of the text on the same line on phone? 

[Huptech-Web]

@Kylara"Could you please share the code for the breadcrumb.liquid file? I'll make a change."

[Kylara]

{% if template == 'product' %}
{% assign current_collection = product.collections.first %}
{% if current_collection %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="/" title="Home">Home</a>
<span aria-hidden="true" style="margin-left: 0px; margin-right: 0px;">›</span>
<a href="{{ current_collection.url }}" title="{{ current_collection.title }}">{{ current_collection.title }}</a>
<span aria-hidden="true" style="margin-left: 0px; margin-right: 5px;">›</span>
<span>{{ product.title }}</span>
</nav>
{% endif %}
{% endif %}

[Huptech-Web]

@Kylara Please replace the code you provided with the following code.

{% if template == 'product' %}
    {% assign current_collection = product.collections.first %}
    {% if current_collection %}
        <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
            <a href="/" title="Home">Home</a>
            <span aria-hidden="true" style="margin-left: 0px; margin-right: 0px;">›</span>
            <a href="{{ current_collection.url }}" title="{{ current_collection.title }}">{{ current_collection.title }}</a>
            <span aria-hidden="true" style="margin-left: 0px; margin-right: 5px;">›</span>
            <span>{{ product.title | truncatewords: 3 }}</span>
        </nav>
    {% endif %}
{% endif %}

I am adding a truncatewords
the truncatewords Shorten a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[Huptech-Web]

Hey @Kylara ,
please try this code if you have some coding knowledge 

<li class="breadcrumb-item active">{{ product.title | truncatewords: 6 }}</li>

truncatewords
Shortens a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.

[Kylara]

Sorry but I have no coding knowledge. I've done every coding with chatgpt.

[Huptech-Web]

No worries, @Kylara. Please replace the code you provided with the following code.

{% if template == 'product' %}
    {% assign current_collection = product.collections.first %}
    {% if current_collection %}
        <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
            <a href="/" title="Home">Home</a>
            <span aria-hidden="true" style="margin-left: 0px; margin-right: 0px;">›</span>
            <a href="{{ current_collection.url }}" title="{{ current_collection.title }}">{{ current_collection.title }}</a>
            <span aria-hidden="true" style="margin-left: 0px; margin-right: 5px;">›</span>
            <span>{{ product.title | truncatewords: 3 }}</span>
        </nav>
    {% endif %}
{% endif %}

I am adding a truncatewords
the truncatewords Shorten a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[Kylara]

Thank you so much!

Can you also tell me how to remove the small line above the breadcrumb? 

[Huptech-Web]

Hey @Kylara Can you please provide me with a screenshot?

[Kylara]

Its pretty hard to see

[Huptech-Web]

Hey, @Kylara It's Shopify default so we can't remove this ( ... ) underlined.

[Huptech-Web]

Hey, @Kylara It's Shopify default so we can't remove this ( ... ) underlined.

[Kylara]

Okay.

Is it possible to do something like this: If the customer is scrolling in the collection and scrolls down for 3 seconds and then clicks on a item. They will arrive in the product listing. But when they now want to go back to the collection, the website should automatically bring them to the place where they left off. Not to the beginning of the collection. Can this be done through the breadcrumbs or somehow? Or is it too difficult? Because it should work when the customer so to say hits undo (like swiping left on an iphone so it brings you back to the previous page). 

[GTLOfficial]

Hello @Kylara 

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.section-template--15907263610949__main-padding {
padding-top: 0px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Huptech-Web]

Hello @Kylara, If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen My All Answer. This will acknowledge your support and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.