catalog page text from category too big in mobile view

Solved
BenP3112
Tourist
6 1 1

Hello,

on my catalog page (here are my 5 categories) the text of the individual categories is too large and is not completely displayed. this only applies to the mobile view. where can i reduce the font size in the editor? in the brooklyn theme itself i have set the smallest font sizes. 

Wahab_Ahmad
Shopify Partner
705 110 166

Hello @BenP3112,

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept the Solution.
Want to modify or custom changes on store Hire me.
Contact me wahabahmadghori@gmail.com

 

0 Likes
BenP3112
Tourist
6 1 1

Thank you very much.

Here is the Site 

https://ben-haylen.myshopify.com/collections

0 Likes
Wahab_Ahmad
Shopify Partner
705 110 166

@BenP3112,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

@media screen and (max-width: 500px) {
span.collection-grid__item-title {
font-size: 14px;
}
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: wahabahmadghori@gmail.com

 

Natztech
Shopify Partner
846 230 627

hello @Wahab_Ahmad 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 

@media screen and (max-width: 769px) {
.template-list-collections  span.collection-grid__item-title {
font-size: 14px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
dmwwebartisan
Shopify Partner
6416 1494 1948

@BenP3112 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
.template-list-collections  span.collection-grid__item-title {
font-size: 14px !important;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
BenP3112
Tourist
6 1 1

Thank you very much guys!

0 Likes
BenP3112
Tourist
6 1 1

This is an accepted solution.

I have another concern.

1 .: Can I rename the name catalog?

2 .: I have added a code to display parallax. In the mobile view in Shopify this also works, when I go to the start page with my mobile phone, it is not parallax and the image size is no longer correct at all. 

3 .: I would like to display my 5 categories individually with a picture on the start page, a button is also there, if you click on it there is currently the catalog with all 5 categories, that's ok, but I would prefer that you click directly on the each category comes with the content of the products.

 

 

My Code for parallax:

{%- assign featured_product = all_products[section.settings.featured_product_handle] -%}
<div class="featured lazy" style="background: url({% if section.settings.img_product %}{{ section.settings.img_product | img_url: 'master' }}{% else %}https://via.placeholder.com/1200x800{% endif %}) 50% 70%;">
<div class="opacity-mask d-flex align-items-center">
<div class="container margin_60">
<div class="row justify-content-center justify-content-md-start">
<div class="column-one">
<h3>{{ featured_product.title }}</h3>
<p>{{ featured_product.description | truncate: 100 }}</p>
<div class="feat_text_block">
<div class="price_box">
<span class="new_price">{{ featured_product.variants.first.price | money }}</span>
{%- if featured_product.variants.first.compare_at_price > featured_product.variants.first.price -%}
<span class="old_price">{{ featured_product.variants.first.compare_at_price | money }}</span>
{%- endif -%}
</div>
<a class="btn" href="collections" role="button">{{ section.settings.txt_button }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /featured -->

{% schema %}
{
"name": "Featured Product Parallax",
"settings": [
{
"type": "header",
"content": "Parallax featured product"
},
{
"type": "image_picker",
"id": "img_product",
"label": "Section image"
},
{
"type": "text",
"id": "txt_button",
"label": "Button text",
"default": "View more"
},
{
"type": "collection",
"id": "collection",
"label": "Select collection"
}
],
"presets": [
{
"name": "Featured Product Parallax",
"category": "collection"
}
]
}
{% endschema %}

MobileView_ShopifyMobileView_ShopifyMobileView_Shopify2MobileView_Shopify2MobileView_myPhoneMobileView_myPhone

0 Likes