Centered signup form box with sticky footer, resizing problems

Here's the example of what I have so far:

https://codepen.io/anon/pen/jQZpNw

My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.

Ideally, what I'm looking for, is to:

Center the box (vertically and horizontally)

On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.

Sticky the footer with a gap between the footer and the box when the browser height is really small.

When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.

I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.

I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

add a comment |

Here's the example of what I have so far:

https://codepen.io/anon/pen/jQZpNw

Ideally, what I'm looking for, is to:

Center the box (vertically and horizontally)

On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.

Sticky the footer with a gap between the footer and the box when the browser height is really small.

When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.

I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

add a comment |

Here's the example of what I have so far:

https://codepen.io/anon/pen/jQZpNw

Ideally, what I'm looking for, is to:

Center the box (vertically and horizontally)

On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.

Sticky the footer with a gap between the footer and the box when the browser height is really small.

When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.

I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

Here's the example of what I have so far:

https://codepen.io/anon/pen/jQZpNw

Ideally, what I'm looking for, is to:

Center the box (vertically and horizontally)

On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.

Sticky the footer with a gap between the footer and the box when the browser height is really small.

When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.

I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.

css css3 sass

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

asked Nov 28 '18 at 3:35

b0xxed1n

4151818

add a comment |

2 Answers
2

active

oldest

votes

You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

answered Nov 28 '18 at 4:20

JasonB

4,30021021

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

1

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

add a comment |

Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

1

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53511722%2fcentered-signup-form-box-with-sticky-footer-resizing-problems%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

answered Nov 28 '18 at 4:20

JasonB

4,30021021

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

1

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

add a comment |

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

answered Nov 28 '18 at 4:20

JasonB

4,30021021

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

1

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

add a comment |

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

answered Nov 28 '18 at 4:20

JasonB

4,30021021

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

$('#nav-button').on('click', function(e) {

  e.preventDefault();

  $('#nav-content').toggleClass('expand');

});

header {

  background: red;

  padding: 5px;

}



header a {

  color: white;

}



#nav-content {

  height: 0;

  transition: height .3s;

}



#nav-content.expand {

  height: 300px;

}



footer {

  color: white;

  background: red;

  padding: 5px;

}



#centered-box {

  height: 200px;

  width: 200px;

  background: green;

  margin: 10px auto;

}



#wrap {

  min-height: 100vh;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}



body {

  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">

  <header>

    <nav>

      <a href='#' id="nav-button">Expand</a>

      <div id="nav-content"></div>

    </nav>

  </header>



  <div id="centered-box"></div>



  <footer>This is the footer</footer>

</div>

answered Nov 28 '18 at 4:20

JasonB

4,30021021

answered Nov 28 '18 at 4:20

JasonB

4,30021021

answered Nov 28 '18 at 4:20

JasonB

4,30021021

answered Nov 28 '18 at 4:20

JasonB

4,30021021

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

1

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

add a comment |

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

1

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

Thanks for the help. I'm having trouble getting it to work with what I have, here's what it looks like in my example (unless I'm doing something wrong?): codepen.io/anon/pen/OaBNPb Getting the same behavior in my actual app as well. Any idea?

– b0xxed1n
Nov 28 '18 at 10:52

Another thing is that because this uses a wrapping div around all of those elements it's going to be problematic to use across the rest of the site for pages that don't follow this sort of center-aligned convention (which will probably be most other pages). Makes templating things hard.

– b0xxed1n
Nov 28 '18 at 11:36

codepen.io/Jason_B/pen/pQQgEg - If you remove the absolute positioning from the footer I think it works great. You can make it so the wrapper style is only applied on a particular page by including the page template class that is being added to the body tag in the theme.

– JasonB
Nov 29 '18 at 7:27

add a comment |

Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

1

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

|
show 1 more comment

Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

1

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

|
show 1 more comment

Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

answered Nov 28 '18 at 4:05

Joey Breithaupt

705

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

1

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

|
show 1 more comment

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

1

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

Yeah Bulma will remove this problem on mobile-size using media queries, it's only an issue for desktop browser windows with odd dimensions (i.e. high width small height).

– b0xxed1n
Nov 28 '18 at 4:08

You can use media queries for more than just mobile. If you want the elements to appear differently on a screen using your example: @media (min-height: 800px) and (min-width: 1200px) { /* CSS stuff */ } and you can set the query to whatever you'd like, that was just an on the fly height and width.

– Joey Breithaupt
Nov 28 '18 at 4:13

Yeah I know, that's why I said mobile-size not mobile ;). it's not really feasible to use media queries for this though, I'd have to make too many of them to cover all of the bases. Appreciate the thought though.

– b0xxed1n
Nov 29 '18 at 3:49

I think I misunderstood your question before. Try this update codepen codepen.io/joeybreithaupt/pen/VVVwvm and let me know if thats what you’re looking for. If it is I can explain it when I get home if you need me to, I’m replying from my phone at the moment.

– Joey Breithaupt
Nov 29 '18 at 4:21

Thanks, but this has the same the problem as my original, when you resize that window (drag the top border down past the box) you'll see that the middle box and its contents hides under the footer and the header, instead of stopping at them and making a scrollbar.

– b0xxed1n
Nov 29 '18 at 9:03

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl