Menu icon Foundation
Target Desktop version of a site converted to Foundation 5

Following on from the idea that setting a background image isn't something fancy in Foundation ...but rather, it's just setting a background image!! (http://foundation.zurb.com/forum/posts/5857-setting-a-background-image-in-foundation#)

I have some further things for a site I want to move from a HTML/CSS framework to Foundation 5 with its responsive grid, which I might be over complicating:

If I want to make the desktop experience match the existing site, with say a minimum height for a section at the top of the page with a background image ("fancy-background"), what's the best way to achieve this?

(The header doesn't span the width of the page, so I've wrapped it in a section). I want to be able to specify a CSS minimum height for class="fancy-background" that only applies to the desktop version. Is this possible?

Also, the site I've inherited has a logo instead of using an image replacement technique. Any reason why I wouldn't change the h1 in the middle of this with something like:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Finally, would it be good practice to create a separate partial to contain these addition rules, _overrides.scss

Thank you

<section class="fancy-background" >
  <header class="row group">
    <div class="large-12 columns" >
      <div class="identity">
        <h1>Welcome to my Zurb Foundation site</h1>
      </div>
    </div>
   </header>
</section>

desktopconverting existing siteminimum-heightcss_overrides.scssbackground-image

Following on from the idea that setting a background image isn't something fancy in Foundation ...but rather, it's just setting a background image!! (http://foundation.zurb.com/forum/posts/5857-setting-a-background-image-in-foundation#)

I have some further things for a site I want to move from a HTML/CSS framework to Foundation 5 with its responsive grid, which I might be over complicating:

If I want to make the desktop experience match the existing site, with say a minimum height for a section at the top of the page with a background image ("fancy-background"), what's the best way to achieve this?

(The header doesn't span the width of the page, so I've wrapped it in a section). I want to be able to specify a CSS minimum height for class="fancy-background" that only applies to the desktop version. Is this possible?

Also, the site I've inherited has a logo instead of using an image replacement technique. Any reason why I wouldn't change the h1 in the middle of this with something like:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Finally, would it be good practice to create a separate partial to contain these addition rules, _overrides.scss

Thank you

<section class="fancy-background" >
  <header class="row group">
    <div class="large-12 columns" >
      <div class="identity">
        <h1>Welcome to my Zurb Foundation site</h1>
      </div>
    </div>
   </header>
</section>

Gavnosis over 5 years ago

Actually I think it's a media query, as per http://foundation.zurb.com/docs/v/4.3.2/media-queries.html

@media only screen and (min-width: 768px) {}

Gavnosis over 5 years ago

Thank you Rafi!

...but if I set min-height as you suggest, is there a way to disregard this when the Foundation grid is anything other than class="large-12" i.e. I don't want a minimum height to be applied for smartphones or tablets - I did caveat this with "I might be over-complicating things..." ;-)

Also, are you suggesting that I add an additional class to the header, and specify max-width: 100% (And therefore remove the 'section' wrapper)?

<header class="row group fancy-background">

And then

.fancy-background {
  max-width: 100%;
  min-height: 300px;
}

I'm very happy writing CSS (and 'transitioning' to SASS!) ...but feel like I'm wearing thick gloves when I'm using Foundation's pre-built classes to achieve a responsive grid!

Rafi Benkual over 5 years ago

If you want full width rows, you can set a css
max-width: 100%;

You can set a min height as well:

.fancy-background {
min-height: 300px;
}

You can even use 100vh as the height if you want it to be viewport height on load.