Menu icon Foundation
2 newbie questions - background images & row width

Hi there

Thanks so much for your help!

I have two questions I just can't figure out.

1. background image

I have a DIV with a background image. At the moment there is nothing in the div but there may be later. I want it to start with a height of 430px for a large screen and reduce down to 300px for small.

background-size:cover;
min-height:300px;
max-height:437px;

But it always stays at 300px and scales the background. How would I accomplish that?

2. RowWidth
The site I am working on has large 100% containers, then a 955px centred area. If I set the row width to be 955px then it doesn't play nice on small screens. It need to be 100% - but then on large screens it spans the whole screen. I have written a little javascript to change the row width depending on window size - but is there a way built into foundation.

Thanks guys - loving foundation so far.

Peter

Row widthbackground Image

Hi there

Thanks so much for your help!

I have two questions I just can't figure out.

1. background image

I have a DIV with a background image. At the moment there is nothing in the div but there may be later. I want it to start with a height of 430px for a large screen and reduce down to 300px for small.

background-size:cover;
min-height:300px;
max-height:437px;

But it always stays at 300px and scales the background. How would I accomplish that?

2. RowWidth
The site I am working on has large 100% containers, then a 955px centred area. If I set the row width to be 955px then it doesn't play nice on small screens. It need to be 100% - but then on large screens it spans the whole screen. I have written a little javascript to change the row width depending on window size - but is there a way built into foundation.

Thanks guys - loving foundation so far.

Peter


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Peter!

For your first question you might want to use media queries:

div
{
  height: 300px;
}
@media only screen and (min-width: 1025px)
{
  div
  {
    height: 430px;
  }
}

For your second question you might want to try this:

@media only screen and (min-width: 1025px)
{
  .row
  {
    width: 955px;
  }
}

flexbox over 5 years ago

Hello Peter,

1.
What is max-height ? https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

I think your content is not bigger than 300px, so your div not expand :)

2.
I think you have not understand completely the grid system http://foundation.zurb.com/docs/components/grid.html
You don't need extra JS to perform this.
Try to hack the grid only with grid classes :)

Wing-Hou Chan over 5 years ago

Hey Peter!

For your first question you might want to use media queries:

div
{
  height: 300px;
}
@media only screen and (min-width: 1025px)
{
  div
  {
    height: 430px;
  }
}

For your second question you might want to try this:

@media only screen and (min-width: 1025px)
{
  .row
  {
    width: 955px;
  }
}

Peter Crymble over 5 years ago

Ah ofcourse - that makes so much sense!!!! Thanks!