CSS: Question Spacing

adampavitt
(@adampavitt)

11 years, 3 months ago

Great plugin by the way.

However I am not well versed in CSS so could you please help me from going mad.

I’m to make my questionaire more readable. I have already found the following CSS from this forum:

div.ss-q-title {
font-weight: bold;
}

1. However the questions still look squashed together so, I was looking to be put a space after each question.

2. My first three questions are: Title, First Name and Last Name is it possible to put this all on the same row?

3. further down I have a drop down box named “school” and under that I have “County”. Can County come up on the same line as “School”?

These or any other ways of making the question more readable would be much appreciated.

https://ww.wp.xz.cn/plugins/wpgform/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Mike Walsh
(@mpwalsh8)

11 years, 3 months ago

Because most WordPress sites have a unique theme, there is no single answer to CSS questions like this. If you’d like me to look at your form, you can fill out my Help and Support Form and I’ll take a look when I get a few minutes.

Thread Starter adampavitt
(@adampavitt)

11 years, 3 months ago

Thanks very kind thank you.

http://www.progressionpeople.com/mindfulness-schools-questionaire/

Thread Starter adampavitt
(@adampavitt)

11 years, 3 months ago

Sorry it appears I added the above URL here by mistake, but I don’t appear to be able to remove my last comment.
Plugin Author Mike Walsh
(@mpwalsh8)

11 years, 3 months ago
Adding space is pretty simple, you could use something like this:
```
div.ss-q-title {
    font-weight: bold;
    margin-top: 100px;
}
```
The 100px value can be tuned to your liking. I used 100px because it will really create a lot of space so it is very noticeable. Your #1 and #3 requests are essentially the same. You want to move things so they are “inline”.

Can this be done? Yes, technically it is possible. However it isn’t simple because there are no block level elements surrounding just those elements that can be styled “inline”. The only way I know to do this would be to use a jQuery script that manipulates the DOM and add a DIV (which can be styled) around the form elements. As I said, technically possible but not easy to do and certainly outside the scope of something I could answer on this forum.
Thread Starter adampavitt
(@adampavitt)

11 years, 3 months ago

Fully understand, that’s fantastic thank you.

One last tweak, idea.

Is it easy to have different space between the scale questions and the text, drop down and date questions?

Plugin Author Mike Walsh
(@mpwalsh8)

11 years, 3 months ago

Do you mean you want more space between the “County” question (which has a drop down) and the “I’m good at finding words to describe my feelings” question and the other scale questions after that?

In looking at the HTML there isn’t anything obvious to use as a selector however it might be possible to get creative and use the table which surrounds the scale and CSS predecessor selectors to select the surrounding DIV. Maybe.

Thread Starter adampavitt
(@adampavitt)

11 years, 3 months ago

The first 7 questions, particularly Title, First Name, Last Name seem to a bit far apart but the numbered questions there after could be spaced out further.

I have no idea how to do what you suggest in the second paragraph, but in short if you have any ideas on how to change the CSS to improve the readability of this questionnaire.

Plugin Author Mike Walsh
(@mpwalsh8)

11 years, 2 months ago

Sorry for the delayed response. I have been traveling quite a bit for work the past couple weeks which has limited my ability to look into support questions.

I went to look at your form again but it isn’t at the URL any longer. Is this still an issue?

Thread Starter adampavitt
(@adampavitt)

11 years, 2 months ago

Sorry, it is on the same domain but it has been moved to:

/mindfulness-schools/questionnaire/

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘CSS: Question Spacing’ is closed to new replies.