I'm currently working with a static block on our website. I'm trying to hide certain pieces of texts within this block when viewed on mobile. I've come across some answers which use CSS. However, I don't have access to the CSS file of our website.

Therefore my question is: Is it possible to achieve this without adjusting the actual CSS file within the static block?

  • which version of magento you used? – Dhiren Vasoya Apr 25 '18 at 13:39
  • Magento ver. – Jordyb Apr 25 '18 at 13:45

Since you don't have access to a CSS file, I only see two options.

1 - Embed a stylesheet at the top of the static block. While editing the static block in question, click the orange Show/Hide Editor button, insert your CSS solution mentioned above, and click save. Clear cache, and refresh page.

Here is a sample:

@media only screen and (max-width: 767px) {

2 - Add a style tag and desired CSS to the head section of every page using the Miscellaneous Scripts section in the Magento Admin.

  • While logged into the Magento Admin, navigate to System > Configuration > General > Design. Expand the HTML Head section and paste your CSS solution mentioned above (including the style tags). Save the configuration. Clear cache, and refresh page. The same code sample above applies.
| improve this answer | |
  • Thanks for your reply! Everytime I add this code to the static block, in the editor. It dissapears when I switch to wysiwyg editor. – Jordyb Apr 25 '18 at 15:01
  • Sometimes saving the block while the WYSIWYG editor is still hidden helps. If not, than I would recommend the 2nd suggestion. – MagentoAaron Apr 25 '18 at 15:11
  • So it doesnt work, yet. This is all the code on the page. <style> @media only screen and (max-width: 767px) { .myclass{display:none;} } </style> <p style="text-align: left;">&nbsp;</p> <p style="text-align: left; padding-left: 80px;"><strong>✓ </strong>Betaal na ontvangst✓ </strong>Altijd een servicepunt bij u in de buurt<strong> ✓ </strong> Gratis verzending<strong><span style="float: right; padding-right: 80px;">✉ &nbsp; &nbsp; &nbsp;Schrijf je in voor de nieuwsbrief</span></strong></p> <p style="text-align: left;">&nbsp;</p> – Jordyb Apr 25 '18 at 15:18
  • Well, .myclass is just a suggested selector - you need to change this to a selector of your choice. What are you trying to hide within that content? All of it? – MagentoAaron Apr 25 '18 at 15:20
  • 1
    It Works! You're the best! Calling it a day for now. Thank you! – Jordyb Apr 25 '18 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.