Jump to content


Photo
- - - - -

Pagelines doesn't behave like a Bootstrap Theme

Bootstrap

Best Answer Danny , 25 March 2013 - 08:58 AM

Hi,

 

Basically, your code is not correct, we have implemented Bootstrap, but you can see our grid system documentation here

 

http://support.pagel...us/grid-system/

 

Now when I view our docs page on my iPhone, which uses different spans on most pages, especially on the grid page. All the spans are full width, see my images below.

 

http://d.pr/i/wJas

http://d.pr/i/l3Vw

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 22 March 2013 - 04:43 PM

When I write HTML on a page or post, it isn't behaving like boostrap would. For example, when I make two columns, each a "span6" I expect the columns to fill up 50% of the value, but then at phone size fill up 100% of the value (i.e. move from two columns to a single column)

 

See this code:

 

<div class="row-fluid">

<div class="span6">

Hello Worlds

</div>

<div class="span6">

Bye World

</div>

</div>

 

However Pagelines just behaves like each div is 50% throughout all viewports, even the phone viewport. Why? 



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 March 2013 - 08:09 PM

Hi there, the grid shortcodes will work in a mobile view, like -

Please Login or Register to see this Hidden Content

 

Can you take a screen shot of what you're seeing and let us know the layout options you have selected and whether the mobile view is enabled. If you're able to send us a live url that would be good to.

 

The boostrap grid code should spilt the content area in half and act responsively right down to the mobile view, unless you've added any css fixed widths to the span tags etc.

 

Let us know and we'll try and work out whats happening for you.



#3 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 24 March 2013 - 08:39 PM

No, that screenshot shows what is wrong. In a mobile view, a span6 should be full width, not 50%. So "Hello World" should be the full width of the view port. That is how Bootstrap works. 



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 24 March 2013 - 08:46 PM

Actually, Bootstrap is 12 segments, not 6, thus a span6 is 50% of the total 12. We do not create or modify Bootstrap, but apply it by Bootstrap's rules.  The documentation for the Grid System

Please Login or Register to see this Hidden Content

, demonstrates its proper use.



#5 thomasr

thomasr

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 25 March 2013 - 04:15 AM

Rob, 

 

Great link. Now go to that link and scoll down to the grid. Resize the window. See how all the columns, regardless of span number eventually become 100% of the column width. My example of two span6s is just that, an example. At the phone viewport all columns become 100% of the width. Your statement that "a span6 is 50% of 12" contradicts exactly what happens if you resize the window. And the way the columns behave by following your link, is the way bootstrap behaves, but not the way Pagelines behaves if you use my code. 

 

My point is simple: The code I stated above gives me two columns at 50% width throughout all viewports, as JamesB's image shows. However, it shouldn't be that way. I've developed many things with bootstrap, and two span6s should become, each, 100% of the column at the phone viewport. But with a clean install of Pagelines it doesn't. Why not? 



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15163 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 March 2013 - 08:58 AM   Best Answer

Hi,

 

Basically, your code is not correct, we have implemented Bootstrap, but you can see our grid system documentation here

 

Please Login or Register to see this Hidden Content

 

Now when I view our docs page on my iPhone, which uses different spans on most pages, especially on the grid page. All the spans are full width, see my images below.

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: Bootstrap