I have created a page using SiteOrigin's PageBuilder, but because of my theme it isn't optimised for mobile. I've been rooting around for a solution without changing the entire theme, and found that by removing the following code from the Theme Header CSS, my site defaults to the desktop view on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1" />

This solves the issue by showing the desktop view of the PageBuilder page on mobile, but it means that the entire site is then not mobile optimized and only shows the desktop version.

I have found many tutorials and answers that involve adding CSS to a particular page, but how can I remove this piece of code from an individual page so that only my PageBuilder page displays in desktop view on mobile?

I have created a page using SiteOrigin's PageBuilder, but because of my theme it isn't optimised for mobile. I've been rooting around for a solution without changing the entire theme, and found that by removing the following code from the Theme Header CSS, my site defaults to the desktop view on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1" />

This solves the issue by showing the desktop view of the PageBuilder page on mobile, but it means that the entire site is then not mobile optimized and only shows the desktop version.

I have found many tutorials and answers that involve adding CSS to a particular page, but how can I remove this piece of code from an individual page so that only my PageBuilder page displays in desktop view on mobile?

• plugins
• html
• mobile

Share Improve this question edited Mar 3, 2020 at 13:24 cjbj 15k1616 gold badges4242 silver badges8989 bronze badges asked Mar 3, 2020 at 11:08 ClearlyGeorgeClearlyGeorge 344 bronze badges 2

• So you want to remove the meta tag, but only on that specific page? Note that the meta tag is a HTML tag/markup, not CSS, you'll be confusing some people by conflating the two. In the meantime, can you tell us where this meta tag is coming from? Is it in your themes header? Added via a hook/filter? – Tom J Nowell ♦ Commented Mar 3, 2020 at 12:09
• Tom J Nowell - My apologies, my understanding of coding isn't great. Going from your comment, yes, it's removing a meta tag from a specific page then. Currently, when I go into theme editor in Wordpress, the meta tag is located in Theme Header (header.php). Removing it solves my issue but I only want it to take effect on this specific page. – ClearlyGeorge Commented Mar 3, 2020 at 12:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

That would be:

<php if (!is_page('slug-of-your-page')) echo '<meta name="viewport" content="width=device-width, initial-scale=1" />' ?>

Beware that if you change the theme files, your changes will be lost if the theme gets updated.