• 0

the columns don't stay centered in 2 column layout

Question

Posted · Report post

I just noticed that for pages on my site with a single sidebar layout, the main column and sidebar seem to be anchored to the sides of the browser window, instead of being centered in the window as the size of the window grows. I have Layout Handling set to be Responsive with Pixel Width, with a 1000px global content width.
 
Have a look at a single column page that works as expected:
 
 
Then have a look at these 2 pages. If you expand beyond the global width of 1000 pixels, the logo and navigation move to stay centered in the viewport while the main column and sidebar stay glue to the edges.
 
 
 
What's going on?
 
Framework Version: 2.4.4
WordPress Version: 3.5.2
Plugins in Use: Jigoshop

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

On the pages in question, did you modify the PageLines Meta Settings in any way?

 

No.

 

Did you add any custom CSS to the site?

 

I disabled all custom css and nothing changed.

 

Did you try resizing the images on that page so they aren't scaled by WordPress?  It is possible that the issue is that the scaling isn't being recognized and the container is sizing based on the full-width of the image, rather than the scaled size (as seen).

 

I manually set the width of the image on a single post to be 400 pixels, and it didn't help.

 

I was able to fix it using this custom css code:

#dynamic-content {max-width:1000px; margin: 0px auto;}

Why is this necessary? Shouldn't that already be there by default?

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi lakersalex

 

Please, you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

 

.fpost {text-align: center;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No let me try to explain more clearly. Please see attached image. The 2 columns themselves, not the content within the columns, are falling outside the global content width and are not staying centered with the rest of the site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi again

Sorry, I understand now

 

Please, you try with

 

#site #dynamic-content {margin-left: 4em; margin-right: 3em;}

 

You can adjust #em as you need.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No that isn't it either. The columns need to move with the navigation, branding and footer. Your fix still keeps them static, but moves them in a little.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

On the pages in question, did you modify the PageLines Meta Settings in any way?

 

Did you add any custom CSS to the site?

 

Did you try resizing the images on that page so they aren't scaled by WordPress?  It is possible that the issue is that the scaling isn't being recognized and the container is sizing based on the full-width of the image, rather than the scaled size (as seen).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm glad to hear you were able to fix it, but not sure why it was necessary.  No, that shouldn't be there by default as some people use percentage widths. You'll now find that your site is probably not responsive.

 

I don't recommend using very large images and letting WordPress resize them.  Not all browsers will accommodate this.  It is best to simply resize images in a graphics editor to the size you wish to display.  If you want, you can also publish a larger version, and in the image tag in your posts, change the linked image URL href to the larger one. Letting WP scale it will probably result in your site not working well in IE, particularly older versions like 8 and 9.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for your help Rob and batman. Sometimes walking away from the screen for a while, and doing something else, like cooking stuffed peppers, helps reset the mind! Cheers!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Enjoy the stuffed peppers! And you're very welcome, as always.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@lakersales

 

I´m glad like Rob to hear you can resolve the problem and the code, I appreciate it to continue learning.
Excellent peppers ! !
;)

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