PrestaShop mobile view: how to fix or hide an element on phones
When one element breaks the PrestaShop mobile view, the usual culprit is a fixed width, text that's too long, or a module's styles that didn't allow for a narrow screen. You add the fix to the child theme's custom.css, in a rule that applies only on phones. Hide an element only when customers on a phone really don't need it.
Author: The TellMyShop team. A guide for PrestaShop store owners: the cause, the manual fix and the same work in a chat conversation.
Last updated: · 6 min read
Why does an element look wrong on a phone?
A PrestaShop store has no separate mobile version. The same code lays itself out differently when the screen is narrow. Problems start when an element can't shrink.
| What you see on the phone | Most common cause | What usually helps |
|---|---|---|
| the page scrolls sideways | an element with a fixed width in pixels, a wide table in a description | 100% width, or scrolling just the table |
| text runs outside its box | a long word, address or code that doesn't break | breaking long words in that element |
| guarantee icons take up half the screen | the module has large icons and three columns with no phone rule | smaller icons, one column, or hiding on phones |
| a button is covered | a chat window, cookie banner or sticky bar | moving the window or a lower bar |
| the product title runs to four lines | a large heading font from the desktop version | a smaller heading size below a chosen width |
| an image is cropped or stretched | a fixed image height in the CSS | automatic height |
The elements that break most often are ones added later: third-party modules, text blocks pasted from an editor, size tables in product descriptions and message bars. The theme itself is often fine.
How to check the mobile view without a phone
Your browser gives you a quick preview. In Chrome, open the developer tools and turn on the device toolbar, as the guide to device mode in Chrome explains. You choose the width of a popular phone and see straight away where the page falls apart.
Device mode is an approximation. Always check on a real phone too, ideally in a private window, so you're not looking at an old version from the browser cache.
Check in order:
- The home page.
- A category with filters.
- A product page with a long name and several variants.
- The cart and the first checkout step.
- A page with a table, such as a size table.
Write down on which page and at what width the problem appears. That's half the fix.
Fix or hide the element on phones?
Try fixing it first. Hiding is quick, but the customer on a phone loses information the customer on a computer can see.
Hiding makes sense when the element:
- repeats information that's already higher up the page,
- is decoration with no content,
- covers the button or price and can't easily be moved.
Don't hide the product description, price, availability, shipping time or returns information. That's what customers look for most on a phone.
Where to add the CSS fix for phones
In the custom.css file in your child theme. You wrap the phone rules in a media query, a block that only applies below a chosen screen width. MDN's guide to media queries explains how it works.
The child theme matters for one reason: an update to the main theme won't overwrite your file. The PrestaShop documentation on child themes explains how to build one and attach your own stylesheet. We cover why changes disappear after an update in our post on how a theme update wiped my changes.
What are the most common phone fixes?
Most mobile view problems are solved by a handful of recurring fixes. You put each one in the block for narrow screens, so the desktop version stays unchanged.
- A wide table in a product description. A size table with many columns pushes the page wider. Instead of squeezing it, let just the table scroll sideways, not the whole page.
- Long words and addresses. A discount code, an email address or a long material name without spaces runs outside its box. A rule to break long words in that one element is enough.
- A chat window over the Add to cart button. Chat modules often have their own setting for position on phones. Check it before you start writing CSS.
- Headings that are too big. A product name on four lines pushes the price off the first screen. A smaller heading size on phones is usually enough.
- Three columns of icons. Guarantee, delivery and returns blocks look better on phones in one column with smaller icons.
Fix one thing at a time and check the page after each change. When you change several rules at once, it's hard to tell which one broke something.
What to check after the fix
After saving, clear the cache in Advanced Parameters → Performance. If you still don't see the change, work through the list in our post on PrestaShop changes not showing.
How to fix the mobile view with the chat
You describe what's wrong and on which page. You can paste a screenshot from your phone into the conversation. Your chat (Claude or ChatGPT) reads the theme files and the page code, works out which class controls the element, and shows the rule before saving.
You: On phones, the guarantee icons under the Add to cart button take up half the screen. Hide them below 768 px and make the product title smaller. Only in custom.css.
Your chat: The icons come from the reassurance module, class .blockreassurance_product. The child theme has an empty custom.css. I'll add:
Nothing changes on a computer. Before saving I'll make a copy of the file, then clear the cache.
You: Yes.
Your chat: Saved. On the product page the rule applies only below 768 px. Check it on your own phone in a private window too.
Card status: waiting for your “yes”old version: (empty file)
new version: @media (max-width: 767px) {
new version: .blockreassurance_product { display: none; }
new version: .product-container h1 { font-size: 1.25rem; }
new version: }
The sizes and class names in this example are illustrative; in your theme they may be different. There's an example request in the use case hiding or fixing an element on phones.
TellMyShop Pro makes changes to theme files once you turn on the Theme switch in the module panel. The switch lasts 24 hours and requires a database backup made the same day. Before every file save a copy is made, and the change goes into the change history, so you can undo most changes with one request. The free TellMyShop Free version doesn't read or change theme files; it helps with store reports. The versions are compared in the pricing.
Questions and answers
Does PrestaShop have a separate mobile version of the store?
No. The Classic theme and most newer themes are responsive: the same store lays itself out differently on a narrow screen. That's why you make phone fixes in the same stylesheet, just inside a rule that applies below a chosen screen width.
Does hiding an element on phones hurt in Google?
Hiding a small decoration or repeated information usually isn't a problem. Be careful with content that matters to customers and to Google, such as the product description or the price. Google judges a store mainly by its phone version, so important content should stay there.
How do I check the mobile view without a phone?
Open the store in Chrome, open the developer tools and turn on device mode. You'll see the page at phone width and can change the screen size. It's a good approximation, but do the final test on a real phone.
Why did my phone fixes disappear after a theme update?
Because they were written into a theme file that the update overwrote, such as theme.css. Keep your own styles in the child theme's custom.css. That file isn't overwritten when the main theme is updated.
Can the chat see what my store looks like on a phone?
It doesn't look at a phone screen. It reads the theme files and the page code, and you describe the problem or paste a screenshot into the conversation. From that, the chat works out which rule to change and shows it to you before saving.
PrestaShop is a registered trademark of PrestaShop SA. Claude is a trademark of Anthropic PBC. ChatGPT and OpenAI are trademarks of OpenAI. TellMyShop is not affiliated with these companies.