Table width on browser (fixed) and mobile (auto) in product description

Solved
Highlighted
Tourist
5 1 0

Hello,

I have added a table in some of my products to show its specifications.

My store is www.elitefridges.co.uk, please see an example on a Swisscave product SKU: WLB450FLD 

 

For the table, I used the below code:

table {
border-collapse: collapse;
width: 75%;
}

 

- the width 75% is to keep it not as wide on the browser. But on mobile it looks very squished and I would like it to be full width. I can only do so by changing it to 100% but then it's too wide on the browser then..

 

Screenshot_20191121-101017_Samsung Internet.jpg

 

What code do I need to add to keep the widths separate on desktop and small screen browsers?

 

Thanks in advance!

 

0 Likes
Highlighted

This is an accepted solution.

Hello ,

Please Put below code so that It will not affect on desktop view.

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

@media only screen and (max-width: 749px) {
#description table {
	width: 100% !important;
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 1 0

This is an accepted solution.

That's worked perfect, thank you!

0 Likes
Highlighted
Tourist
5 1 0

Hi again,

 

I am about to upgrade my current theme and found that the collection page contents do not fit in the mobile screen either (as shown in picture), would you be able to advise a solution to this? Think it might be quite similar to the previous solution you provided. Any help would be much appreciated!

 

Contents do not fit.PNG

0 Likes
Highlighted

Hello @TeamEliteCherry,

Actually you did coding in "table"

Why you won't use Shopify Grid..

So it is easy to manage in desktop and mobile

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 1 0

To be honest I find it quite hard to use shopify grid in terms of modifications and adjusting sizes etc, but I will give it ago

0 Likes
Highlighted
Tourist
5 1 0

Hello @oscprofessional 

I have also noticed that on our pages, the tables are not responsive either? the previous solution you provided works on product description table only - any ideas?

e.g. https://www.elitefridges.co.uk/pages/wine-cooler-delivery-lead-time

Thanks a lot!

TeamEliteCherry_0-1605699497447.png

 
 
 

 

 

 

 

0 Likes