Custom colums design

@dallass Did you want three questions in each column? Plus what title did you want in each column? Thirdly did you want two columns on a small mobile device. Please include a link to the page you have the shortcode on and make sure you haven’t added any css to it so I may work from scratch. Using two instances of the shortcode may work better.

Plus which editor are you using? Beaver builder, Gutenberg, Oxygen etc…

• This reply was modified 4 years, 10 months ago by johnzenausa.

Hi,

I want 2 columns and in each column 3 questions.
The title should be something like: “Unanswered questions”.
Yes, it would be good to have 2 columns in a mobile, but, if not possible, one under each other will work also.

For the moment I am using it in a widget in the sidebar. I didn’t add it in a page, yet.
The goal is to insert insert the shortcode in articles after 2nd paragraph. I will do this with a plugin or directly in the template.
I don’t use any custom css except a border-bottom.

I am using the classic editor.

Go ahead and set it up the way you want first. Then send me the link to the page. It will be impossible for me to do anything if I have nothing to work with. Set up the shortcode exactly the way you want also. Thanks.

Good morning,

Please check in this page.
“Teme fara raspuns” should be the title. Then, there should be 2 columns, one next to each other, each column having 3 questions.

Please check in the content of the article, not in the sidebar. In the sidebar everything it is OK.

I will fix it in the next update. As for now you may add the following to your CSS file. Works just as well.

.netsposts-block-wrapper { column-count: 2; }

If you don’t want any margin as shown in the image link add the following:

.netsposts-column { margin-left: 0; }

And if you don’t want any of the border lines just add:

.netsposts-content { border-bottom: none !important; }

If you’d like to make sure this pertains to this one shortcode only you may add:

shortcode_id='custom-shortcode-id' that way it will only change this exact shortcode. So the above CSS arguments will be the same except be preceded with the ID as in below.
#custom-shortcode-id .netsposts-block-wrapper { column-count: 2; }
#custom-shortcode-id .netsposts-column { margin-left: 0; }
#custom-shortcode-id .netsposts-content { border-bottom: none !important; }

Here is the image to show you what the above will look like. Keep your shortcode the same except for adding the following ID above to the shortcode. So your shortcode will look like:

[netsposts shortcode_id='custom-shortcode-id' include_blog='9' post_type='question' column='2' titles_only='true' include_link_title='true' hide_source='true' list='6']

Remember to change custom-short-code-id to whatever name you want. Must begin with a letter for proper CSS formatting.

https://drive.google.com/open?id=1mQm2UHeHgSY8mbIH5AdjdDSdK4tSREO9

Here is another image with the removal of the borders and margins. That is with all the above CSS added.

https://drive.google.com/open?id=1DZncmNI5-nuBr3CDwlgSTHpyBi7LHsC9

• This reply was modified 4 years, 10 months ago by johnzenausa. Reason: Added second image

Thank you so much. It is working!
However, to look better, I had to add 2 shortcodes: 1 for the mobile and 1 for desktop.

As I said before, this is a plugin that has lots of features and I have not found a similar one.

I would suggest that your work a bit on the optimization. For example, I searched for Multisite (not network) and multisite posts and www.remarpro.com did not returned your plugin.
Also, in the description from the wordpress page, maybe it would be good to put first the plugin features and then the changelog. Honestly, for me the changelog it is not important at all. When I download I use the last version. I do not care about the first version.

• This reply was modified 4 years, 10 months ago by dallass.

What you can also do which is simple is using the following css:

.netsposts-block-wrapper { display: grid; grid-template: auto / auto auto; }

As you can see in the image it looks much cleaner.

Design with using grid CSS

Note: This replaces all other CSS of course so if you implemented any of the above that I have showed you just remove all of it except the margin-left: 0; and replace it with this one. ??

• This reply was modified 4 years, 10 months ago by johnzenausa. Reason: Forgot to remind her to remove all previous CSS
• This reply was modified 4 years, 10 months ago by johnzenausa.
• This reply was modified 4 years, 10 months ago by johnzenausa.
• This reply was modified 4 years, 10 months ago by johnzenausa. Reason: Corrected CSS from auto auto / auto auto to auto / auto auto

To make it look cleaner on mobile you can just use the same shorcode and then add the following css:

@media screen and (max-width: 575px) { .netsposts-block-wrapper { display: grid; grid-template: auto auto / auto; } }