Jump to content
Sign in to follow this  
thomasr

Pagelines doesn't behave like a Bootstrap Theme

Recommended Posts

thomasr    0
thomasr

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
thomasr    0
thomasr

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
thomasr    0
thomasr

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
    • micstepl
      By micstepl+
      is Bootstrab (http://getbootstrap.com/ ) kompatible to PL5? how to install most fitting?
    • respectgb
      By respectgb+
      Hi,
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?

      Cheers

    • brightonkeller
      By brightonkeller+
      For some reason my Tabbed content isn't working correctly (see this page - click on all tabls)
       
      It could TOTALLY be the shortcodes I've got in there but I wanted to see if any of you could pinpoint the issue faster than I could. Any help would be must appreciated. 
       
      attached is a screenshot of what I see.
       
      And here is the code I have in the edit html...
      [pl_raw][pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle active="yes" number="1"]Currently Obsessed[/pl_tabtitle] [pl_tabtitle number="2"]gifts for him[/pl_tabtitle] [pl_tabtitle number="3"]Office // Desk[/pl_tabtitle] [pl_tabtitle number="4"]PLAID TREND[/pl_tabtitle] [pl_tabtitle number="5"]GIFT IDEAS[/pl_tabtitle] [pl_tabtitle number="6"]baubles[/pl_tabtitle] [pl_tabtitle number="7"]FUR VESTS[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] [show_boutique_widget id="122328"] [/pl_tabcontent] [pl_tabcontent number="2"] [show_boutique_widget id="201724"] [/pl_tabcontent] [pl_tabcontent number="3"] [show_boutique_widget id="203968"] [/pl_tabcontent] [pl_tabcontent number="4"] [show_boutique_widget id="201832"] [/pl_tabcontent] [pl_tabcontent number="5"] [show_boutique_widget id="176320"] [/pl_tabcontent] [pl_tabcontent number="6"] [show_boutique_widget id="203960"] [/pl_tabcontent] [pl_tabcontent number="7"] [show_boutique_widget id="176328"] [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs][/pl_raw]
×