Mobile responsiveness works on chrome but not firefox

I'm troubleshooting this page: http://fujixerox.com.sg/promotion
On Chrome, when I resize the window width, the header and menu changes accordingly.
But on Firefox (42.0), as I resize, the header and menu doesn't resize accordingly.
I don't have access to the template, so I can't edit the head tag.
I can only edit the content in the div with the "lyt-main" class.
How do I ensure that the header and menu behaves correctly in Firefox?
LVL 1
killdurstAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
Both firefox and chrome respond in the same way for me.  you could try running firefox in safe mode to rule out that any plugins are affecting your css

Clipboard01.jpg
killdurstAuthor Commented:
Hi Rob, thanks for your comment.
When you say "respond in the same way", do you mean the header resizes or not?
I restarted firefox in safe mode and the header still doesn't resize when I resize the window width.
RobOwner (Aidellio)Commented:
Before we get too confused, would you mind posting a screengrab of what you're calling the header?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RobOwner (Aidellio)Commented:
e.g. I see this on both firefox and chrome:

Goes from this
Clipboard05.jpg
to:
Clipboard04.jpg
killdurstAuthor Commented:
Hi, when I resize the width of my Chrome, I get the following view...

 headerMobile.jpg
This is the same view we will get if we access the site on our smartphone.

But when I resize my firefox, the header (logo, search box, navigation menu) doesn't resize accordingly.

Update: My friend says that the header doesn't resize on their Chrome too.
Julian HansenCommented:
Confirming Rob's post - I see the same thing on Firefox and Chrome.
killdurstAuthor Commented:
If you go to the main page at fujixerox.com.sg and resize your window width, the header will change accordingly.
If you were to view the /promotion page on your mobile phone, it should also show the mobile version of the header.
I think it's because the main page has that viewport meta tag?
But what if I can't edit the head tag of the promotion page?
Is there anything I can do from within the div tag with the "lyt-main" class that will change the look of the header when user resize the window width?
Julian HansenCommented:
If you go to the main page at fujixerox.com.sg and resize your window width, the header will change accordingly.
Not seeing it - when I change the width all that happens is that the right of the page is masked by the smaller window.
As Rob requested earlier - can you post a screen grab and show us what we should be looking for.

Also there are some script errors on that page - you might want to fix those first.
Slick812Commented:
greetings  killdurst, , Looked at your problem page for promotions, and as you said, the "Header" was all screwed up in responsiveness, and did not change at all wid width, so I went to another site page (products) at -
     http://fujixerox.com.sg/products
and there the "Header' was working and responsive and seemed to be acceptable in changing for different widths. So I tried to compare the two page codes to see if I could notice the difference  in things (add on) for the header not working. The first thing that I noticed was that your NON workin promotions page has bootstrap (just the JS, not the CSS) and the products has NO Bootstrap in it, could this be the problem? As far as I know, for bootstrap to work , you need the bootstrap.css in there somewhere.

you have this on the workin products page -
<div id="header">
        <div class="lyt-header">

and you have this on the promotions Non workin page -
<div id='header'>
   <div class="top-left">

below is the Non-workin navigation -
<!-- MAIN NAVIGATION -->
<div class="navigation">
<ul id="oe_menu" class="main-navi oe_menu">
  <li class="products size16"><p><a href="http://fujixerox.com.sg/products" class="bold">Products</a></p>
<div class="prod">
    <div class="first-col">

Open in new window


below is the Workin navigation -
<!-- MAIN NAVIGATION -->
<div id="nav-global">
  <ul>
    <li class="products w-full"><a href="http://fujixerox.com.sg/products">Products</a>
    </li>

Open in new window



you seem to have completely different setups for the Header HTML in the two pages, why is that? shouldn't your template have the same header HTML, CSS structure on all pages?
killdurstAuthor Commented:
Hmm... seems like I'll have to contact the original developer and ask them about the script errors and stuff.
Yeah, it seems that the pages use different templates with different headers.
Unfortunately I don't have access to the templates.
I can only access the content area through Joomla.
I will continue to look into this.
killdurstAuthor Commented:
Ok, from Joomla, I changed the template to be used for the /promotion page.
It seems to be fine now.
So I guess, the error is because I assigned the wrong template to the page huh. :(
Slick812Commented:
you ask - "I guess, the error is because I assigned the wrong template"
That seems like what made the difference in it not working, , , , , however, There are drastic differences in the page HTML, CSS structures between the two pages I looked at, the non - working promotion page, had the bootstrap JS in it, but did not seem to use that bootstrap CLASS functioning, as if you changed the Page functioning in development to get a new or better page functioning, or view. . . . .
But what I can not understand , is that with the alternate HTML code the Header, looks exactly the same in desktop view (although it in not responsive), even with very different set up as -
<div id='header'>
   <div class="top-left">

You need to stick with the working template, unless you understand what you are doing with changes to that template, or the use of another template setup, as these changes can effect the view and functioning for more than a single thing (HTML section) in that page.

If you look at the page "Source Code" in your browser development tools, I will often show you in red or other ways, what is out of specs (NOT CORRECT) in the HTML structures , you really need to have your HTML and CSS page code to be correct, so the different browsers and variations (MOBIL) will show your page correctly.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.