So i am doing the project with CSS Foundations. THere is this code <h1 class="main-logo">Logo</h1> Instead of Text

If you're inserting it as a background image, perhaps try:

background-size: contain;

You can even specify a pixel measurement in there. Here, this is where I'm looking: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Maybe it's a problem with your css? Could you show your css declarations for .main-logo?

.main-logo { width:auto; background-repeat:no-repeat; background-size:cover; }

so in the index.html file its set as '''<h1 class="main-logo">Logo</h1>'''

I am trying to replace the LOGO text with a img file that will not mess with the css layout and will reszize with window size.

its off the CSS Foundations track 1-6

Instead of using img tag in html, you can add the background-image property to your css, like this: background-image: url("yourimage.jpg");

Ya can get image there, but I can get it to resize, thats my issue

You would add background-image property to .main-logo

I'm not really sure... have you tried changing width: auto to width: 100%?

One more thought... Some browsers don't support cover or contain. Here's a chart that shows browser support. http://caniuse.com/#search=cover

If you're still stuck, maybe post entire html and css, in case there is something else causing the problem.

Well the link to my website is powersat.frozen-igloo.com

CSS Code is as follows

I have now managed to get the img logo to appear on my mobile page when I get below a certian pixel. SO if I resize my desktop browser and it gets smaller my logo appears and shrinks accordingly to screen size, and it shows up on my mobile phone no problems.

Now my issue is, when I have full screen browser, I have NO image there at all. Only appears when I resize my browser :(

/* Page Styles ================================ */

• { -moz-box-sizing: border-box; box-sizing: border-box; } body { font: normal 1.1em/1.5 sans-serif; color: #222; background-color: #edeff0; } html, body, .main-wrapper, .col { height: 100%; }

.bgSizeCover { background-position:center; width: auto; height: 150px; background-repeat:no-repeat; background-image: url('../img/powersat-canada-large.jpg'); background-size: contain; color: #000; text-shadow: 1px 1px 0 #fff; } /* Layout Element Colors ================================ */

.main-header { background-color: #fff; } .main-logo { background-color: #fff; } .main-nav li { background-color: #3f8abf; } .primary-content { background-color: #caebf6; } .secondary-content { background-color: #bfe3d0; } .main-footer { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout ================================ */

.main-header { padding: 20px; display: table; width: 100%; min-height: 120px; } .main-banner { background: #ebedee; text-align: center; padding: 35px 15px; } .main-logo, .main-nav, .main-nav li { display: inline-block; } .main-logo, .main-nav { display: table-cell; vertical-align: middle; } .main-logo { width:auto; background-repeat:no-repeat; background-size:cover; } .main-nav { padding-left: 50px; } .main-logo, .main-nav li { border-radius: 5px; } .main-nav li { margin-right: 10px; } .main-logo a, .main-nav a { color: white; text-decoration: none; display: block; text-align: center; padding: 10px 20px; } .main-footer { text-align: center; padding: 10px; }

/* Column Layout ================================ */

.col { display: inline-block; padding: 20px; margin-right: -5px; vertical-align: top; } .primary-content { width: 80%; } .secondary-content { width: 20%; }

/* Media Queries ================================ */

@media (max-width: 768px) { .main-logo, .main-nav, .main-nav li, .col { display: block; width: initial; height: initial; margin: initial; } .main-nav { padding-left: initial; } .main-nav li { margin-top: 15px; } .main-banner { display: none; } }

In your css, in .main-header, try deleting display: table and min-height: 120px

Actually, I think you only need to delete display: table. You can leave the min-height if you want.

I took a look. I think your media query might be messing with it? Because that's the only time you have an issue. Try commenting out the .main-logo selector and see if that works? Maybe separate it out and try floating it left in your media query?

Well removing the display:table worked (ish) my Logo has now appeared but my 4 links are starting under the Logo image and not aligning to the right of image (or left on page). Cant get them to wrap beside

Do you want them to align all the way to the right?

To be honest anywhere but under my logo unless its in a small resolution such as a mobile device. but when viewing your average full screen webpage I would like them just to the right of the img or all the way to the right end of the webpage. Keeping in mind when the screen size is reduced it goes to responsive. If that makes any sense

In your css, make a rule for ul.main-nav and add float: right.

I would like to thank you too for your help in advance.

also the ul.main-nav does float it right, but then page links dont go under the log when I resize

In a media query that targets smaller screens, you can add rule for ul.main-nav with float: none.

I'd actually approach the media query a little differently—serve the mobile version first, then float it right using a (min-width: 768px) instead of a max width. The devices with less oomph won't have to work as hard if you do that because the simplest code is all they'll have to pay attention to. Then that should take care of the links not responding the way you like, because the default will have them displaying as block elements under the logo.