Skip Navigation

[Resolved] Data inside the same row placed in cells next to each other displayed vertically

This support ticket is created 7 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
- 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)

This topic contains 16 replies, has 2 voices.

Last updated by prasadS 7 years, 2 months ago.

Assisted by: Minesh.

Author
Posts
#566977

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

#567059

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#567642

Hi Minesh,

Can you guide me with how I can disable the css class you mentioned? I would be very thankful.

Regards,

Prasad Shelar

#568345

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#569287

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.

#569399

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#570969

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

#571187

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.

#571252

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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/

#571588

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.

#571723

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#571759

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

#572003

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

#572019

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#572191

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