Jump to content


Photo
Grid Shortcodes

problem with responsive grid on responsive tab

responsive grid tabs

Best Answer Evan Mattson , 25 June 2013 - 08:07 PM

Hey @stug,

 

Let me see if I understand what you're having trouble with.

 

Normal Display:

http://screencast.com/t/PHnJZ2GbxmA

 

Responsive Display:

http://screencast.com/t/SFrQ6Hri8jx

 

This is normal behavior of the grid.  I agree sometimes you may not want it to change like that, but that's the default behavior.

 

Images should definitely scale within the grid and just about anywhere else in PageLines.

 

Sorry I don't have a solution for you.  Grid Shortcodes simply implements the grid markup in a handy way that is visual-editor-friendly.

 

If you're seeing something weird or something other than what I see above, please provide a screenshot and what browser (and version) you're using.

 

 

Cheers!

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 22 June 2013 - 03:17 PM

Hi I have created a page with a tabbed section and have formatted a responsive grid on the first tab using the shortcodes [row], [span6] etc. In full width browser, the layout looks fine, but when resized the images overlap the tabbed area. The page is here: http://loveyogaanato...om/test-caffe3/

 

Also even when looking at the demos using the grid they realign the images underneath each other when the images get to a certain size. This seems too soon to me, is there a way to let things get smaller before everything is shuffled around?

 

In the middle of posting this I thought I should try it without the tabs to see if it works like that and it doesn't so maybe I am coding it wrong. My layout is like this for 3 columns

[row]

[span4]content

[/span4]

[span4]content

[/span4]

[span4]content

[/span4]

[/row]

shame cause I thought I had eventually got the hang of something.



#2 Rob

Rob

    One Smart Egg

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

Posted 22 June 2013 - 03:30 PM

Hi Stug,

 

I would imagine that the images themselves are not set to be responsive, but are of fixed size.

 

I don't know that images in a grid will be responsive.  Logically, the images are set in their HTML code in pixel sizes, which are not responsive.  Thus, when you resize, the browser sees pixels in the CSS code or HTML.  When resized, since the browser cannot manage the image, it will overlap. 



#3 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 22 June 2013 - 03:50 PM

Following on, there was no problem with the grid an tab setup, my error lay in a few missing " in the image code. oops newbie : (

However Still have the problem of the whole thing shuffling too soon for my liking. Can this be adjusted somehow by setting the minimum width a image or column should scale down to realigning. Also I have three columns, is it better to have a even number. Have set up a simple coloured grid so you see what I mean.

http://loveyogaanatomy.com/grid-test/



#4 Danny

Danny

    Is Awesome!

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

Posted 23 June 2013 - 12:44 PM

Hi,

 

You're creating your grid using the Grid shortcode plugin, this is a third party plugin so we are unable to provide assistance. However, I think the issue may be related to the fact that you're using a shortcode to create your tab content and then another shortcode to generate your grid, basically, a shortcode inside a shortcode.

 

I recommend using the HTML method inside a tab and see if this resolves your issue.

 

I have also moved this topic to the store products forum and added the products prefix, the developer should be notified of your issue.



#5 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 25 June 2013 - 04:22 AM

Hi Danny, thanks for the input. I have tried the whole thing without the tabs and the same thing happens as far as the resizing, when scaling the browser down it resizes the column for a while then jumps from 3 columns straight to 1 column. I appretiate what your saying about the shortodes I'm using being a tird party pluggin so: If I wher to use the code listed in the tools section of the framework, such as

  1. <div class="row">
  2. <div class="span4">Span 4</div>
  3. <div class="span8">Span 8</div>// etc
  4. </div>

would that resize in the way that I am thinking it should and could I set how narrow the columns are allowed to get before the whole thing shuffled?

Thanks



#6 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 25 June 2013 - 04:41 AM

JUst rebuilt it with the code above. does exactly the same thing. Any ideas as to how to make the transition smoother? Otherwise I am thinking any smaller screens will be only one column wide. as far as display goes.

http://loveyogaanatomy.com/grid-test2/



#7 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 227 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 25 June 2013 - 08:07 PM   Best Answer

Hey @stug,

 

Let me see if I understand what you're having trouble with.

 

Normal Display:

http://screencast.com/t/PHnJZ2GbxmA

 

Responsive Display:

http://screencast.com/t/SFrQ6Hri8jx

 

This is normal behavior of the grid.  I agree sometimes you may not want it to change like that, but that's the default behavior.

 

Images should definitely scale within the grid and just about anywhere else in PageLines.

 

Sorry I don't have a solution for you.  Grid Shortcodes simply implements the grid markup in a handy way that is visual-editor-friendly.

 

If you're seeing something weird or something other than what I see above, please provide a screenshot and what browser (and version) you're using.

 

 

Cheers!



#8 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 26 June 2013 - 04:08 AM

Hi Evan, in all probability it's me doing somehing wrong, The problem is only evident wih multiple columns in a reponsive design. There is a premium section called 'squared' that works in the way I am trying to explain http://squared.ahansson.com/ . Lets say you have three columns and you are resizing the browser. What I would expect to happen is for all three column widths to reduce until they reach the detemined minimum width for a column and then to shunt the last column below, just displaying two in width. Then again as it reduces further the two columns would reduce in width until the second had to be placed under the first, and you ended up with efectively all columns displayed as one.

But this is what is happening for me: I start with three columns, when the browser is resized the columns initial shrink in width as expected but then go from 3 columns straight to 1. I thought it might be because I had an odd number of columns, so I tried with four and the same thing happens. The four reduce in size and then jump to 1.

Thanks for your help



#9 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 227 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 26 June 2013 - 04:42 AM

@stug,

 

Yeah, that would be nice to have the columns behave like that. The reason they all go to one column is essentially because they are not evaluated as individual grids so to speak - they are being changed by a global media query that changes all span classes to a single column width (ie 100%) when the screen width reaches a certain size.  

 

Forcing the grid to keep the columns you define and not break into 1 like it is now would probably be the easiest thing but would still involve some custom coding.



#10 stug

stug

    Advanced Member

  • Members
  • 58 posts
  • Framework Version:pro
  • Country: Country Flag

Posted 28 June 2013 - 03:46 AM

THanks Evan, saves me a lot of time wondering what I am doing wrong.







Also tagged with one or more of these keywords: Grid Shortcodes, responsive grid, tabs