Home › Toolset Professional Support › [Resolved] Data inside the same row placed in cells next to each other displayed vertically
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 |
---|---|---|---|---|---|---|
- | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | - |
- | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Kolkata (GMT+05:30)
Tagged: Front-end display, Layouts plugin
This topic contains 16 replies, has 2 voices.
Last updated by prasadS 7 years, 2 months ago.
Assisted by: Minesh.
I am trying to: Display data next to each other in a horizontal manner. I have created a row and placed data in 3 cells next to each other. But the data is displayed one below the other instead of getting displayed next to each other.
Link to a page where the issue can be seen: hidden link
Hello. Thank you for contacting the Toolset support.
Thanks for all the information. I checked the issue and there is a CSS conflict with your theme CSS.
=> hidden link
The class causing the issue is:
.row>div:not(.col) { width: 100% !important; }
If you disable the CSS within this class - you will see that output is normal.
Hi Minesh,
Can you guide me with how I can disable the css class you mentioned? I would be very thankful.
Regards,
Prasad Shelar
Well - you should try to follow the following step:
1)
Try to Edit your theme's CSS file at the path:
=> wp-content/themes/flatsome/assets/css/flatsome.css
2)
Open the file "flatsome.css" and find the string ".row>div:not(.col)" once you locate that CSS, comment out the CSS as given under:
/* .row>div:not(.col) { width: 100% !important; } */
3)
Save your file and check if you got the desired output.
Hi Minesh,
I am using a child theme.
I created a folder named 'assets' inside the child theme.
Then created a folder named 'css' inside the assets folder.
Then I created a file named flatsome.css inside the 'css folder.
Then I simply added the exact code in the flatsome.css file and commented out the code you mentioned.
It is not working.
Please help.
Is it possible for you to send me access details of your site?
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).
I have set the next reply to private which means only you and I have access to it.
Could you please check now. I've added following code to CSS section at Toolset => Layouts CSS and JS
.row>div:not(.col){ width:auto !important; }
Now, if you check following page - the data displayed in one row.
=> hidden link
Hi Minesh,
Thanks for the help.
The columns in the row are not equally divided in 6 parts. The columns are left aligned. It does not appear like a equally spaced 6 column grid.
Also, if I add an image, the image is displayed full width and it is not contained / restricted to the size / width of the cell. Please have a look here: hidden link
Kindly help.
Well - I think you do not understand how to use Toolset grid layout. I see you have added 6 visual editor cells to your layout and each visual editor contains the image and title.
[wpv-post-featured-image size="full"] [wpv-post-title]
Basically - you can build the listing page using view's and bootstrap grid layout. You can create the listing using views and you can output it as the bootstrap grid. Please check the following Doc:
=> https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-bootstrap-layout
Now, I would like to know - what content you want to display - I mean from which custom post type you want to display the content?
I suggest you should create a test site on our test platform discover-wp.com and try to learn how layouts are created. You can use any existing reference sites we offer that will help you immensely.
=> hidden link
=> hidden link
More info:
=> https://toolset.com/faq/how-and-why-to-create-a-test-site-in-discover-wp/
Hi Minesh,
I had added the 6 cells only to see how content is placed next to each other in a row. I was not trying to design / display a view.
I want to design a layout template for the custom post type 'Places'.
Now, In the layout template I have added 2 rows.
In the first row, I have only added the post title.
In the second row I have added 2 cells next to each other. The cell on the left side contains the featured image. The cell on the right side contains the post body.
I want the featured image and post body to be displayed in two columns next to each other. But currently, they are displayed one below the other. I want to fix this.
Please have a look here: hidden link
Please let me know if I am doing something wrong here. Please let me know.
I will also try the discover WP test sites.
Well - the issue is from your theme file and the same code I shared before that breaks the bootstrap output.
.row>div:not(.col) { width: 100% !important; }
Above CSS does exactly nothing but breaking Bootstrap.
I mean: that theme you are using has its own grid system. This is what our CSS expert told me that the theme author we assume probably meant: apply grid system only if small-6 (equivalent of Bootstrap's clo-sm-6) is used along with class ".col" But this makes no sense because his columns use: max-width and his :not(.col) reset uses "width". Max-width is much more important than "width" even with all these !importants.
So… I know this is bad, but I would recommend editing original theme (I know…) and change this:
.row>div:not(.col) { width: 100% !important; }
To this:
.row>div:not(.col) { max-width: 100% !important; }
If you want I can make changes to your file but first I need your permission.
AND:
write to the theme author that he should make above changes in his original theme because this is what he probably meant originally.
This way: the original theme will work properly and there will be no conflict with Bootstrap.
Doing such a change (or any other) in child theme won't work unfortunately.
Hi Minesh,
1) I have written to the theme developer and requested him to make changes as suggested by you.
2) I have made chances to the css file flatsome.css under the 'assets' folder in the theme - as you had mentioned, but there is no change. Can you please have a look?
Also please go ahead and make the changes. After you do the changes, please also let me know the exact step for the same, so that I can do it on my own next time / if there is a theme update.
Thanks a lot for all the help. I appreciate the awesome support.
Regards,
Prasad Shelar
Hi Minesh,
It looks like the theme author has fixed this issue in the latest version. Can you have a look now please? I have updated the theme to the latest version.
Links:
1) hidden link
2) hidden link
Regards,
Prasad Shelar
Yes - It looks like your theme author fixed the issue as I can not see the CSS class is added when I load the same page.
Hi Minesh,
There is one more thing I need help with.
After I activate the Layouts plugin, a grey background is added to my main menu on hover.
Can you help me with this? Or will I have to create a new ticket? Please let me know.
Regards,
Prasad Shelar