0

There is something in my css causing my columns to squish instead of stack but I cannot find what it is. Any chance someone is seeing something in the code I am not?

test site

Website link here: http://uspeqtest.000webhostapp.com/index.html

Thanks in advance for any info and tips.

Blag
  • 5,818
  • 2
  • 22
  • 45
Ian G.
  • 13
  • 5
  • 2
    Welcome to Stack Overflow! Please provide all relevant code in an [mcve] in the question itself, not on a third-party site. – Heretic Monkey Dec 19 '16 at 18:40

2 Answers2

1

main.css:907

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Don't switch .row to flexbox, you're breaking bootstrap...

Blag
  • 5,818
  • 2
  • 22
  • 45
  • Do you have a suggestion what to switch this too? This came with the template I am using for this site. – Ian G. Dec 19 '16 at 18:52
  • @IanG. you can't use flexbox on Bootstrap class, especially `.row` and `.col-*`. take a look at where your template use the `.row {flexbox}` and move it to another class name (`.tpl-row` or whatever); Or try to remove it if you don't use the feature that use flexbox – Blag Dec 19 '16 at 18:55
  • @IanG. BTW, your template probably use flexbox because it don't use Bootstrap, so you can try to move it to bootstrap (and remove the flexbox css part as it'll be done by bootstrap) – Blag Dec 19 '16 at 18:57
  • Removing that flexbox rule did fix the issue. Thank you. Is there a way I can get that grey background color in that column to extend to the bottom and to the right in that column? – Ian G. Dec 19 '16 at 18:59
  • @IanG. if this solve your question, don't forget to check the answer to flag it as "solved"; I don't get your question about the grey background, seem ok on my firefox – Blag Dec 19 '16 at 19:03
  • I am using to bootstrap columns next to each other (col-sm-8, and col-sm-4) I would like the background color of the col-sm-4 to be the grey color and reach to the top of footer no matter how much content is in the left column. The contact form on the contact page is fairly long but the grey column on the right on that page does not extend to the bottom and to the right. Does that make sense? – Ian G. Dec 19 '16 at 19:21
  • @IanG. yes, I get it now; it's a classic problem of bootstrap, without a good solution sadly... Solution 1 of this is probably the best : http://stackoverflow.com/a/19695851/5546267 – Blag Dec 19 '16 at 19:38
  • That trick works to get to grey background to extend to the top of the footer. Any idea to how to get it to extend to the right of the viewport? – Ian G. Dec 19 '16 at 20:04
0

At first, I'd recommend you to give us more details among your problem. Furthermore, I did take a look at your website and notice some faults in your source code (RMB on page - View source). So make sure you have no HTML errors at first.

Josh Williams
  • 19
  • 3
  • When the width of the viewport is shrunk the text in the columns squish together instead of stacking on top of each other, ie, the grey column on the right is supposed to drop below the left column. – Ian G. Dec 19 '16 at 18:55