Override Script/Meta tags in header?

Hello all again.

I have some custom meta tags in the global meta tag settings. I would like to disable this for two specific pages. Is there any way of doing this without having to go disable it entirely and enable it manually on all my pages (about 83 pages… :man_shrugging: )? Thanks.

You’d need to use Javascript. Create a function that will delete the specified scripts or meta tags you have set .

Or, turn off your universal headers, and put the headers you need on whatever page you need.

1 Like

Ok thank you for the info. Using the toolbox plugin I added an action on page load. and with the code:

document.querySelector("[name='viewport']").remove()

Please keep in mind i have very little coding experience. Should this work as intended? In my global settings i have this set;

<meta name="viewport" content="width=1200"/>
$("[name='viewport']").remove()

as well.

You can also use the same function to inject a new one.

Neither of those two seem to be working.

The page is still loading full width instead of mobile size.

I would love to know this

1 Like

This code WILL work.

(document.querySelector("[name='viewport']") || {remove:()=>0}).remove()
1 Like

Screenshot 2022-06-24 224329
Still not working. Am i missing something here?

Give me a link to your page (dm if you need to).

Here is a test page I. The only difference with this page is I just made it a responsive page. But still has the same issue when opened in mobile.

-LINK REMOVED-

Sorry but it will be mostly blank if you are not logged in.

stop updating for 1 min :stuck_out_tongue:

Before I go further into this, what is your end-goal?

sorry for the updates lmao.

My end goal is to have this page display as mobile size. Not zoomed out to 1200px.

I think what’s happening is that Bubble is injecting the meta AFTER the page has been loaded, so the script isn’t doing anything but removing it right away, then adding it again after the page has been loaded.

Is this page specifically for mobile only?

Yes it is.

here you go:
https://ghostcodes.bubbleapps.io/version-test/mobileview

Editor:

Optimized for mobile apps. checkout the viewport.
chrome_LlQGJ9zg6K

chrome_1iDUfTGXh9

ALSO - Do not set your viewport on your global headers. Every page sets their own viewport based on your settings. Overriding a viewport will not work.

I don’t think i get what you are saying. Currently I have a global viewport for all pages. All the pages i DO NOT want mobile view. Except now for this one page that i linked above. How would i get it to show mobile view on that one page.

Your example is just a regular mobile page. I know how to do that already.

The thing is, I’ve never ran into this issue using inbuilt width features. I mean unless you’re not using responsive engine? When you setup a page, you can set the MOBILE version of the page.
chrome_csyTYfJ6T1

It will automatically adjust the browser and go to the page that is set for mobile.

This is the viewport I am talking about under settings. Not per page.

That adds 1200 viewport on ALL your pages NO MATTER WHAT.
What I’m saying is, you don’t need to even set this as long as your page width is setup accordingly. Your inner container is what you’ll set your max width too.