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
  • 25,180
  • 10
  • 57
  • 71
g.pickardou
  • 28,328
  • 32
  • 103
  • 221
  • 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,546
  • 2
  • 14
  • 24