Optimizing collection text area width for PC and Mobile users

New Member
9 0 0

Hello,

 

I tried to increase collection text area width so it doesn't look it's "stacked" and text will spread to right. I edited this on assets folder:

 

.medium-up--grid--table {
display: table;
table-layout: fixed;
width: 100%;
margin-left: 0;

 

Instead of 100% I used 200%. It did spread perfectly on PC and was just what I was looking for. However when visiting my page with mobile phone, it will show only like 50% of the text. Any ideas how to do this in some other way so the text will spread to the right and still be optimized for phone users?

 

Store is set to public already:  www.timmspc.fi

 

Here's picture to demonstrate:

image.png

0 Likes
Pathfinder
77 8 9

@timmspc

 

Add following css into your theme.scss.css file:

.template-collection header .section-header__item {
    width: 100%;
}

Let me know still you need more help.

 

Thank you,

Tejas

 

 

 

Shopify Expert | for any help regarding Shopify contact at: support@hexaecommerce.com
0 Likes
Highlighted
New Member
9 0 0

Perfect this worked, thanks!

0 Likes