what did I do in CSS to lose the header?

Hi, on holidaymealgifts.com/new_look/, I only changed one thing beyond color in CSS. I changed the width of 3u to 70% instead of 23.5% on line 49 of core.css. It looks good in a laptop browser, but when I take it to a mobile emulator, the header and navigation are gone.

The reason I changed that percentage is that I wanted the top section to go the width of the page. Originally it was 3 sections across, like the lower part.
Who is Participating?
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.

MurfurFull Stack DeveloperCommented:
Line 10 of core-1200px.css change width to max-width and it will then respond to changing window size
.\35 grid-layout {
    margin: 0 auto;
    max-width: 1200px;

Open in new window

Then you'll need to fix #menu to allow it to respond in the same way and present the menu properly
mel200Author Commented:
Hi, I'm sorry, I'm not quite understanding that... can you explain more, please?
mel200Author Commented:
Let me explain further what I don't understand.  change width to max-width. But the left hand side says max-width, so what am I changing?

and when you say, "Then you'll need to fix #menu to allow it to respond in the same way and present the menu properly "

I don't know what you mean, since I don't understand the first piece. Please explain further. Thanks!
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MurfurFull Stack DeveloperCommented:
I take it you are not au fait with CSS... there is an easy to follow tutorial here: http://www.w3schools.com/css/default.asp

Setting an element width with a 1200 pixel value gives that element a fixed width of 1200 pixels in any browser. This means that the page will not 'respond' to any changes to the window size whether changed manually by the user or being viewed on a tablet or smartphone.

Applying the style max-width: 1200px to the element will mean that the browser will display the element as 1200 pixels wide IF THERE IS SPACE TO DO SO i.e. the window width is greater than 1200 pixels.

#menu is the ID of the DIV containing the green/white navigation links. You will need to tinker with width/max-width there as well in order to get the same responsive effects.

Try to use percentages or ems instead of pixels.

You appear to be using skeljs as your frame work (http://skeljs.org) so I am thinking that in making your page layout replicate the required design you have inadvertently added restrictions to the responsive flow.

skeljs is still in beta so you might want to consider jumping to a 'production' framework. There are lots out there, a couple I mostly use are like unsemantic.com, getbootstrap.com but you shut have to put in 'responsive framework' or 'responsive template' into google to see how many come up
mel200Author Commented:
Ok, so instead of it being set at 1200 px, what should I set it to? I'm certainly not au fait with CSS, but I'm learning. :)
MurfurFull Stack DeveloperCommented:
Hey, no worries, we all had to start learning at some point! Bear with me though, just got one people here right now...
mel200Author Commented:
OK, thanks!
MurfurFull Stack DeveloperCommented:
1200px isn't bad per se considering that most desktop machines have screen widths far in excess of that.
So that's your consideration - who are your audience and how are they going to access your site?

Typically, the template/framework will handle actually sizes of elements on the page because it is responding automatically to the screen size of the device that is accessing the site.

In order to achieve this, their style dimensions will specified in percentages of the parent element rather than fixed pixels

In your cease I think you may have clashing styles which is hindering your progress, you appear to be based on the SKYLINED themplate (http://templated.co/skylined) but you also have the n33 stylesheets.

You may have to spend some time unpicking one from the other

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

Murfur is correct, you will need to understand CSS and moreso the reason for how the CSS is applied before you make changes to it.

You are using a mobile responsive design and these are classes for creating grid-based layouts that are derived from the java script on your page. I am not familiar with your particular script but making changes to the core.css is a bad idea. As style sheets cascade you are better off making changes to your css later on in the order so you can easily revert it, ideally in a custom.css file or as in this case (as it seems to have such custom file) in the appropriate CSS file.

You already experienced undesired side effects in your example and Murfur's advice is to revert your change and use a dynamic width with a max value rather than  a fixed width to achieve this, which should solve your issue.
mel200Author Commented:
Thanks, I'll give the points to Murfur.

Interestingly, I unzipped and uploaded the original files,

and it doesn't show the navigation menu on a mobile phone emulator, either. I guess the problem lies with the original template. Thanks for your help.
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

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.