Columns problem

[petertravisParticipant]

Hi all

I'm pulling my hair out over this one. I'm trying to create columns in a page with my newly purchased eleven40 theme. I've followed the instructions on the tutorials page, which is to place the following in the page editor:

<div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>

<div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>

I've done this but it just shows as two paragraphs, one below the other.  I've checked the style.css and the classes are listed. Coincidentally, I went into the demo of this theme on the studiopress website and the columns don't show up there either.

Would really appreciate any advice before I'm completely bald.

Many thanks

[Aaron HartlandParticipant]

The columns are showing up when I look at the StudioPress demo site (http://demo.studiopress.com/eleven40/columns/)

Could you post a link to your site?

---

Aaron Hartland | http://www.aaronhartland.com
Twitter  |  Facebook  |  LinkedIn  |  Google+

[petertravisParticipant]

Hi Aaron

Here's a link (by the way, my columns show in Genesis but not wen I activate eleven40):

http://www.ieltsspeaking.co.uk/content/

Thanks

[petertravisParticipant]

Hi Again

I've just checked out the eleven40 demo page in Explorer and I can see the columns. But in Chrome they don't show. I then looked at my page (link above) in Explorer and my columns show but again, not in Chrome. Equally concerning, in Explorer the text in the right hand column disappears on the right of the screen.

Peter

 

[petertravisParticipant]

More info

Thee seems to be two problems.

1) I use Chrome by default and as I said above, the columns don't show.

2) Having looked at the demo page on studiopress in Explorer the columns appear within the page OK (not on Chrome), but I also discovered that the left hand menu (where Archives,  Social Media ect is) is actually not on the left at the top any more but squeezed half off the screen at the bottom of the screen. In Chrome the left navigation is OK.

My screen resolution is 1024 x 768.  I'm a  little concerned that this theme is buggy or not suitable for certain browsers.

[Robert NeuParticipant]

You're seeing the responsive design in action. At that screen resolution the columns switch to a 100% width layout and are stacked on top of each other. That is expected behavior for the theme.

I'm not sure why you're still seeing columns in IE unless you are using an old version of IE which does not support media queries by default.

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[Aaron HartlandParticipant]

Yes, he (FAT Media) is correct. At your screen resolution, the columns are 100% and won't show side by side.

I don't think you need to adjust this... but if you must... in the "@media only screen and (max-width: 1200px)" section of your css, you could could remove the column widths that you want from the below block of CSS and assign new properties:

.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
padding: 0;
width: 100%;
}

---

Aaron Hartland | http://www.aaronhartland.com
Twitter  |  Facebook  |  LinkedIn  |  Google+

[petertravisParticipant]

Hi

Thanks for getting back to me.

It's a pity I can't attach an image as the the eleven40 demo page on Studiopress doesn't look at all right in Explorer at my res.  I can see what you mean regarding the columns in the page in Chrome. They probably have been stacked, which is possibly why I don't see them with this browser. But in Explorer,  whilst the columns show, the left hand menu hasn't been stacked on top of, it's squeezed down the left/bottom of the page. Looks horrible. I'm using IE8 by the way.

As far as my site is concerned,  the columns are showing up in Explorer on my page but the text is disappearing off the screen on the right making the right column unreadable. I'm wondering whether I've bought the wrong theme as lots of my visitors will be using a screen resolution of 1024 x 768.  Or is this the case with studiopress themes generally?

 

[Robert NeuParticipant]

IE8 does not support media queries. The theme you are using is designed using the 1140 grid which means the maximum width is going to be too wide for your screen to display correctly on IE8.

It's actually very easy to add a shim (which uses a bit of jQuery) to force IE8 to render media queries correctly if this is something you are concerned about.

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[Robert NeuParticipant]

If you want to shim older versions of IE, here is how to do it:

Download respond.min.js from this github repository:

https://github.com/scottjehl/Respond

Inside your theme's root directory create a new folder called js and place respond.min.js inside that folder.

Then in your functions.php file add the following:

/** Add support for media queries in IE */
add_action('get_header', 'eleven40_load_scripts');
function eleven40_load_scripts() {
global $is_IE;
if($is_IE) {
wp_enqueue_script('respond', $src = CHILD_URL.'/js/respond.min.js', array('jquery'), TRUE);
}
}

Upload everything to your web server and test the results.

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[petertravisParticipant]

Thanks for fantastic support everyone, especially on a Sunday. I'm happy to give these changes a go even though I'm a novice. But at the risk of seeming ungrateful, my problem is I bought a responsive theme because I wanted the site to be as accessible as possible to as many users  as possible. Unfortunately it seems this theme is designed for modern browsers/screen resolutions. I'm using the latest version of Chrome and columns don't appear and there are the issues with IE8 mentioned above.  Many of my visitors will be on similar setups and I'm wondering how much tinkering will be necessary to get the site right for these people.

I really like the look of eleven40 and would like to stick with it. But will it mean a lot of customisations to css, javascript etc? If so I might become a nuisance in this forum as I will need a bit of help!!

Thanks

[Robert NeuParticipant]

The issue you're seeing in Chrome isn't really an issue, it's part of how the theme is designed.

One option you could consider would be to use  http://studiopress.com/themes/agency/ as it is designed using a 960 grid system which will display correctly on lower resolution screens. It should display correctly even on older versions of IE without a polyfill script like the one I posted above.

A 1024x768 screen resolution is quickly becoming uncommon and older versions of IE are falling out of use as well. Are you sure that your site will have a large amount of visitors with small screens AND outdated browsers?

---

Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

[petertravisParticipant]

Hi

Not huge numbers,  about 10% on IE8 or lower and around 14% on 1024x768 or thereabouts.  Still  a significant amount of people, though as you say a dwindling number.  And with the responsive theme I'd hopefully pick up  a lot more mobile users.

I was hoping to design a homepage similar to studiopress', which is the reason for wanting columns.  Or is the layout there (blocks of text left and right every so often) achieved in another way?

Thanks

Pete

[Author]

Posts