0

* Edit *

Accidentally wrong picture was uploaded for standalone case. Now corrected

* Edit *

I am unable to set the column widths (with col-) within and iframe. The CSS selector seems to be completely ignored. The very same page if requested as a standalone page (not iframe) works as expected. Please see the attached pictures.

Standalone:

enter image description here Within iframe:

Within iframe

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
g.pickardou
  • 32,346
  • 36
  • 123
  • 268
  • 1
    They both look the same to me... both showing 600x34 with padding 0 15px. No difference in size, according to your screen shots. – Jacob Roberts Apr 15 '15 at 21:36
  • You are right. Accidentally wrong pics were uploaded. I've already edited and corrected. – g.pickardou Apr 15 '15 at 21:39
  • 1
    Looks like the iframe is rendering smaller. So you using col-lg-2 may be ignored if the iframe has a media size for sm or xs. Try changing that line to `
    ` and see if it renders correctly in your iframe.
     – Jacob Roberts Apr 15 '15 at 21:42
  • @Jacob Roberts: Bingo! Using col-sm solves this. I am still not understand why col-lg it is not working, the iframe was 1000px with but anyway... – g.pickardou Apr 15 '15 at 21:58

1 Answers1

1

The out of the box media widths are

-xs smaller than 768px

-sm 768px

-md 992px

-lg 1200px

So with your iframe set to 1000 will fall in the -md category. The way the columns work is, it will default to 12 wide if it is smaller than what is listed. Since you had it set to -lg and the iframe was only 1000, then the width automatically adjusted to 12 wide.

Example col-xs-6 will be 6 regardless of how big or small you make the screen but if you use col-sm-6, then it will be 6 until the screen width goes below 768px, which then it will automatically jump to 12 columns wide.

Jacob Roberts
  • 1,725
  • 3
  • 16
  • 24