[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

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.
0
mel200
Asked:
mel200
  • 5
  • 4
1 Solution
 
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
0
 
mel200Author Commented:
Hi, I'm sorry, I'm not quite understanding that... can you explain more, please?
0
 
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!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
0
 
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. :)
0
 
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...
0
 
mel200Author Commented:
OK, thanks!
0
 
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
0
 
captainCommented:
mel200

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.
0
 
mel200Author Commented:
Thanks, I'll give the points to Murfur.

Interestingly, I unzipped and uploaded the original files,
www.holidaymealgifts.com/new_look/skylined_template_2457/

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.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now