Jump to content
stug

problem with responsive grid on responsive tab

Recommended Posts

stug    0
stug

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://loveyogaanatomy.com/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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
stug    0
stug

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/

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stug    0
stug

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

Share this post


Link to post
Share on other sites
stug    0
stug

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/

Share this post


Link to post
Share on other sites
evan    0
evan

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!

Share this post


Link to post
Share on other sites
stug    0
stug

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

Share this post


Link to post
Share on other sites
evan    0
evan

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.

Share this post


Link to post
Share on other sites
stug    0
stug

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

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


  • Similar Content

    • Rebecca Rinas
      By Rebecca Rinas
      I want my separate tabs to stay open with the collapser flat plugin - they don't show up until you hover over them. Anyone know how to make all of them visible?Thanks
    • Steve Webb
      By Steve Webb+
      Hi,
       
      Wondering if there is a way to use pills instead of tabs with the tabs shortcodes?
      I noticed that in the .less file there is the option for pills, just dont knowhow to make the markup happen.
      Is there a different shortcode for pills, or a way to select that option with that shortcode?
       
      Thanks!
    • Marko
      By Marko+
      Hi, I have a spacing problem when using the responsive grid. The vertical distance between the lines is much too high.

       
      I used Firebug to try to figure out how to change this without success. I would appreciate any help.
       
      Here's the link to the web page in question: http://3deltastudio.ca/full-studio/
       
      Thanks,
      Marko 
    • fullcontact
      By fullcontact
      Propricing allows for one Link URL and 1 Link Text for each pricing Col. in the table.
       
      Many times when a particular option is being sold it would be nice to have the option to add a "Billed Monthly" or "Billed Yearly" link for the same col.
       
      So what I'm looking to do is:
       
      1. Find a way to either split the single button in each col. into two separate buttons each with it's own direct link to a billing system/ gateway that is set for the monthly or yearly option.
       
      or
       
      2.  have separate propricing sections in  a tabbed view.  For example the first default tab would display the "billed monthly" table and the second tab would have a cloned version with the "billed yearly' button.
       
      I'm looking for suggestions... just want to reduce the number of steps/choices/screens the buyer has to go through when ordering.
    • seanocaside21
      By seanocaside21+
      Hi Ellen,
       
      I am having an issue with your Tabtastic plugin that I recently purchased.
       
      Basically on tab click the page scrolls down to bottom. Obviously not ideal!
       
      You can see the test website here http://gwd-test.flcr....ie/?page_id=28
       
      I wonder do have a solution? 
       
      Thanks,
       
      Sean
×