Skip Navigation

[Resolved] 2nd row of Grid shifting to right / below

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user's layout grids were not lined up correctly and would reflow under each other.

Solution:

For this user they were using a screen space to small to hold the number of Grid columns so bootstrap was reflowing the items automatically.

To resolve this you can use less columns in a row or increase the screen size.

This support ticket is created 6 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 5 replies, has 2 voices.

Last updated by ChrisJ7454 6 years, 2 months ago.

Assisted by: Shane.

Author
Posts
#1094710
Screenshot_2018-08-29 Edit layout ‹ Wedding Speech Help — WordPress.png
Screenshot_2018-08-29 Combined Ticket Test – Wedding Speech Help - Issue.png
Screenshot_2018-08-29 Combined Ticket Test – Wedding Speech Help - Desired Result.png

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.

#1095145

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Chris,

Thank you for contacting our support forum.

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,
Shane

#1095147

Hi Shane

Thanks for getting back to me. Here's a link to a page where the problem occurs

hidden link

Regards

Chris

#1095170

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Chris,

As suspected the are is way too small for the items to be displayed correctly. Could you try extending the area to be wider and see if this helps?

Thanks,
Shane

#1095187
InkedScreenshot_2018-08-29 Combined Ticket Test – Wedding Speech Help - Gapping.jpg

Hi Shane

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
Chris

#1096159

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.