Jump to content


Photo
- - - - -

the columns don't stay centered in 2 column layout


Best Answer lakersalex , 21 July 2013 - 08:07 PM

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?

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 20 July 2013 - 09:34 PM

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:
 

Please Login or Register to see this Hidden Content

 
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.
 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

 
What's going on?
 
Framework Version: 2.4.4
WordPress Version: 3.5.2
Plugins in Use: Jigoshop


#2 batman

batman

    Bat Learning

  • Members

  • 2065 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 July 2013 - 10:36 PM

Hi lakersalex

 

Please, you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

 

.fpost {text-align: center;}



#3 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 20 July 2013 - 11:00 PM

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.

Attached Files



#4 batman

batman

    Bat Learning

  • Members

  • 2065 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 20 July 2013 - 11:19 PM

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.



#5 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 20 July 2013 - 11:23 PM

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.



#6 Rob

Rob

    One Smart Egg

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

Posted 21 July 2013 - 02:34 PM

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).



#7 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 21 July 2013 - 08:07 PM   Best Answer

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:

Please Login or Register to see this Hidden Content

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


  • batman likes this

#8 Rob

Rob

    One Smart Egg

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

Posted 21 July 2013 - 08:18 PM

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.


  • lakersalex likes this

#9 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 21 July 2013 - 08:25 PM

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!



#10 Rob

Rob

    One Smart Egg

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

Posted 21 July 2013 - 08:27 PM

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



#11 lakersalex

lakersalex

    Super Member

  • Members
  • 102 posts
  • LocationLos Angeles
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 21 July 2013 - 08:37 PM

Please Login or Register to see this Hidden Content



#12 batman

batman

    Bat Learning

  • Members

  • 2065 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 21 July 2013 - 09:07 PM

@lakersales

 

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