I am trying to create a layout (using a 6 column x 2 row grid) that displays information from one of my custom post types within one of the rows. The information is being pulled in correctly but when it displays on the page the 2nd row content is shifting to the right resulting in the content in column 1-3 appearing in columns 4-6 and the content in column 4-6 appearing below in columns 2-4.
I have attached screen shots showing the layout set up, issue and desired result.
Please advise possible cause and potential solution.
This usually happens when the screen size is too small. The rows start to reflow below each other. Could you send me a link to the page where I can have a look at this issue ?
Thanks for that. I have increased the amount of space the content utilises to 8 columns (i.e. 2/3rdof the page width) and the info is now appearing on two rows as required but there is a lot of white space between the headings and the data and between the two rows (see attached image).
Is there anything that can be done to reduce this?
Thanks for you help Shane, I have changed tack and created an alternative solution using a table (with one item per row) within a View as opposed to having two items side by side within a Grid in the Layout. I have then inserted the View into the layout which has allowed the info to be displayed using fewer columns and elminating the excess white space.