Archived

This topic is now archived and is closed to further replies.

  • 0

Pagelines doesn't behave like a Bootstrap Theme


Question

Posted · Report post

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? 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi,

 

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

 

http://support.pagelines.me/docs/miscellaneous/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

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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, shown here, demonstrates its proper use.

Share this post


Link to post
Share on other sites

Posted · Report post

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? 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, the grid shortcodes will work in a mobile view, like - http://screencast.com/t/O7YZYyXhbsAF

 

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.

Share this post


Link to post
Share on other sites