0

This is what my webpage looks like on my computer a busy cat

What I am trying to do is:

  1. move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).

  2. Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)

I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/

How would I go about just centering one of the rows, such as:

<div class="row no-gutter">
  <div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
  <div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
   <div class="col-xs-1"><input type="text" class="marks form-control"></div>
   <div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>

Anything to point me in the right direction would be great.

iamtesla
  • 423
  • 2
  • 5
  • 18
  • 1
    consider flexbox for dynamic / responsive centering: http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Feb 22 '16 at 01:50
  • @Michael_B a helpful link, but I am still struggling to implement it properly. – iamtesla Feb 22 '16 at 01:59
  • Yeah, I tried, as well. There's just too much going on in your demo. And the code posted in your question doesn't even appear in your demo. It's a struggle to reproduce the problem, hence not easy to find a solution. – Michael Benjamin Feb 22 '16 at 02:05
  • 1
    @Michael_B I have cleaned up the fiddle a little bit (link is updated). Sorry I had tried to code above (demonstrate my thinking) but it was unable to fix my issue. If you notice if as you drag the webpage on the fiddle my content gets 'squished'. Just want to move it to the center and have it play nicely with mobile! – iamtesla Feb 22 '16 at 02:12
  • Try 'container-fluid', instead of container with class 'text-center'. – Shashank Feb 22 '16 at 02:18
  • Although the elements appear aligned left on the screen, they are actually occupying 100% width of the screen, which makes centering difficult from a high container level. Once you get to the parent element of the content divs however, you can center them with flexbox: https://jsfiddle.net/zpvrspaq/22/ – Michael Benjamin Feb 22 '16 at 02:23
  • @Michael_B thank you, I see what you are saying. How would you recommend handling mobile users? I would like the content to be centered and fill the screen. Also, how can I prevent the content from being squished as the screen gets smaller? – iamtesla Feb 22 '16 at 02:27
  • 1
    Post those questions and your code, along with a demo that reproduces the problem, in your question. – Michael Benjamin Feb 22 '16 at 02:33

3 Answers3

1

Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.

I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades

#table-of-grades {
  display: table;
  margin: auto;
}


.table-cell {
  width:50%;
  float:left;
}

I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.

https://jsfiddle.net/Lzvz60u1/

symlink
  • 11,984
  • 7
  • 29
  • 50
  • Amazing! Thank you so much it is working great now and solves both of my issues. Only thing I could think of is that it is slightly closer to the left edge than the right. (maybe 10-20px) Any idea how to fix that? – iamtesla Feb 22 '16 at 03:23
  • You're welcome. As for the centering issue, I don't see it in the fiddle, so I would guess the problem is with one of the parent containers. There may be a width, padding, or margin set on one of the parents that is throwing off the layout. I can't be of much more help than that without seeing the code. – symlink Feb 22 '16 at 03:30
  • I was able to fix the centering issue. I do have one last question, would it be possible to change the width of #table-of-grades? I'd love for it to be slightly more narrow. I tried setting the width to something like 80% but on mobile devices it wouldn't fit the whole screen like it does now. You can see a alpha version of my website on www.gradecalc.co – iamtesla Feb 22 '16 at 19:19
  • To be honest, I'm not sure what is making the table wider than it should be. See this page: http://stackoverflow.com/questions/21130221/how-are-display-table-cell-widths-calculated for an explanation of how table widths are calculated. You can set the #content div's max-width to 280px, which is the best way I can see to achieve what I believe you're after. – symlink Feb 23 '16 at 03:05
  • Okay cool, I figured that was the change that needed to be made but I wanted to be sure. Table width does seem to have a little weird behaviour. Thanks for everything! – iamtesla Feb 23 '16 at 04:16
0

Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div

Nicholas
  • 37
  • 1
  • 10
0

DEMO

It would be very simple using flex box.

here's the gist of the demo

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

html

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>
Louie Almeda
  • 5,366
  • 30
  • 38