|
Sue Adams
|
May 26, 2015 at 1:15 pm
On our website the spacing is so tight on some of the questions, that they all seem to run together, making it difficult for the user to determine where the next question begins. Is there a way to fix this? I am using wordpress 4.2 and Event Espresso 4.6.23.p
|
|
Lorenzo Orlando Caum
|
May 26, 2015 at 2:27 pm
Hi Sue, this can likely be adjusted with a line of CSS which could then be added to your child themes stylesheet or via a free plugin like My Custom CSS or Reaktiv CSS Builder.
Could you provide a link to any event on your site?
Thanks
—
Lorenzo
|
|
Sue Adams
|
May 26, 2015 at 3:40 pm
Link to event: http://register.ilapsc.org/events/attendee-registration-2015/
Once you select a ticket and click on Register Now button you’ll see the questions. I’m fine with the spacing for the questions until you get down to the Question Group Labeled “Conference Specific Details for Attendee” then all of the questions starting running together it seems.
|
|
Lorenzo Orlando Caum
|
May 26, 2015 at 3:59 pm
Hi, this CSS will help:
#ee-single-page-checkout-dv input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]) {
max-width: 100%;
min-width: 50%;
width:100%;
margin-bottom: 20px;
}
You can add it to My Custom CSS and save changes and here is a preview of what it will look like:
http://cl.ly/image/1z070S0O1g34
—
Lorenzo
|
|
Sue Adams
|
May 26, 2015 at 4:18 pm
I entered that into “My Custom CSS” (yes it was activated) and I saved changes. I cleared by browser cache and pulled up the page and there was no change. I even changed margin-bottom: 20px; to margin-bottom: 320 px; to make sure and again, no change. Sigh – I’m getting a little frustrated here lol.
|
|
Lorenzo Orlando Caum
|
May 26, 2015 at 4:24 pm
Again, this was also tested in my local web browser before I shared it.
Try this instead:
#ee-single-page-checkout-dv input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]) {
max-width: 100%;
min-width: 50%;
width:100%;
margin-bottom: 20px !important;
}
—
Lorenzo
|
|
Sue Adams
|
May 26, 2015 at 4:32 pm
I did that – Still no difference in the way the questions display (I again even tried 320px margin-bottom).
|
|
Lorenzo Orlando Caum
|
May 26, 2015 at 4:40 pm
Hi Sue, your site isn’t loading your My Custom CSS file and reports an issue with it (http://cl.ly/image/1l1B2P1a3t2c):
http://example.com/wp-content/plugins/my-custom-css/my_style.css?
Double-check to see if there any content in there that doesn’t belong. For example PHP code snippets should not go there as it will only work for CSS.
If that fails to resolve the issue, then try copying all of the content that is there into a reply here and we’ll see if we can locate cause of the issue.
—
Lorenzo
|
|
Sue Adams
|
May 26, 2015 at 4:44 pm
I am using wordpress 4.2 and Event Espresso 4.6.23.p at this point in time. (Although I anticipate that the admin is going to update both of those to the most current version in the morning). Here is what is in My Custom Css right now:
.ee-form-add-new-state-lnk.display-the-hidden.smaller-text {display:none;}
#ee-single-page-checkout-dv input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]) {
max-width: 100%;
min-width: 50%;
width:100%;
margin-bottom: 120px !important;
}
|
|
Lorenzo Orlando Caum
|
May 26, 2015 at 4:53 pm
That CSS looks fine. Perhaps another plugin is causing a conflict here as your My Custom CSS file is not loading on your site.
Try Reaktiv CSS Builder.
—
Lorenzo
|
|
Sue Adams
|
May 28, 2015 at 11:06 am
I am now running EE 4.6.29.p with wordpress 4.2 and My Custom CSS. Your CSS code is adding more spacing, but to the wrong areas. The text input boxes have been increased, but my problem was not with those areas. The questions that have radio buttons, checkboxes or drop-downs are where everything is spaced so tightly together.
|
|
Tony
|
May 28, 2015 at 12:33 pm
Hi Sure,
To target the Checkboxes and Radio Buttons specifically you can use:
#ee-single-page-checkout-dv .ee-radio-label-after,
#ee-single-page-checkout-dv .ee-checkbox-label-after {
margin-bottom: 10px;
}
You can also split both those selectors (currently separated with a comma) to assign different values to each if you prefer:
#ee-single-page-checkout-dv .ee-radio-label-after {
margin-bottom: 10px;
}
#ee-single-page-checkout-dv .ee-checkbox-label-after {
margin-bottom: 15px;
}
Does that help?
|
|
Sue Adams
|
May 28, 2015 at 12:51 pm
I tried that code and that does help a bit, but it’s really more of an issue of the spacing between the checkboxes and radio buttons and the next question – it’s like everyting just runs together. Wish I could send you a screenshot to show you what I mean.
|
|
Lorenzo Orlando Caum
|
May 28, 2015 at 1:02 pm
Hi, we don’t accept attachments. However, you can upload to an online service and then link to it here:
https://eventespresso.com/wiki/troubleshooting-checklist/#screenshots
—
Lorenzo
|
|
Sue Adams
|
May 28, 2015 at 3:01 pm
For an image with no CSS spacing, see: http://grab.by/HDMG
For an image with 15px spacing, see: http://grab.by/HDMK
|
|
Tony
|
May 28, 2015 at 3:21 pm
Using Chrome Dev tools we can style pages and view the changes, that how we build up the code above.
So is it spacing like this that you are looking for – http://take.ms/JbFLF
|
|
Sue Adams
|
May 28, 2015 at 3:27 pm
The first red box adds space after the question, but before the answers. The second red box adds space before the question. What I’m looking for, is just the spacing as with the 2nd red box, that would add spacing just before each question. If that’s possible, that would be great!
|
|
Sue Adams
|
May 28, 2015 at 3:37 pm
Tony, I do use Chrome and I’ve perused the developer tools, it’s just that I’m not awesome savvy with css as far as what to look for when I want to affect changes. For example, one of our questions is Choose one of our breakout sessions to be held at 1:45 p.m.: (Please attend only the session your register for)* When I use developer tools and I select the magnifying glass tool and get the question highlighted, I see this: div#ee_reg_qstn-618-56-lbl.ee-required-label.ee-reg-qstn 636px 48 px
So If I would want to change the spacing before each question, I wouldn’t know how what I see relates to EACH question. Am I over thinking this? Thanks for your input!
|
|
Tony
|
May 28, 2015 at 3:40 pm
Like this? – http://take.ms/HMzln
div.ee-reg-qstn:not(:first-of-type) {
margin-bottom: 50px;
}
Its not strictly ‘correct’ but only because some old browsers in use don’t support :not… however if a user is using those browsers, they should be used to pages looking a little strange.
|
|
Sue Adams
|
May 28, 2015 at 3:54 pm
That’s a start, but the spacing between the first and second question are still tight, See: http://grab.by/HDTW
Here is what would be ideal for my situation: Only within the Section called: Conference Specific Details for Attendee if I could somehow make the question itself stand out a bit and/or fix the spacing between the first and second question I’d be golden!
|
|
Sue Adams
|
May 28, 2015 at 3:56 pm
This issue with the spacing really only becomes an issue with questions that have radio boxes and checkboxes for answers.
|
|
Sue Adams
|
May 28, 2015 at 4:06 pm
I messed with the CSS just a bit and if I use:
#ee-single-page-checkout-dv .ee-radio-label-after {
margin-bottom: 3px;
}
#ee-single-page-checkout-dv .ee-checkbox-label-after {
margin-bottom: 3px;
}
div.ee-reg-qstn {
margin-bottom: 20px;
}
It looks pretty good, but would be better if I could cut out the amount of spacing between the question and it’s answer choices. With the code above, it looks like this: http://grab.by/HDVo (without the arrows) but if I could just control the spacing where the arrows are pointing (which is the spacing after each question with radio buttons and checkboxes that would make me happy!
|
|
Sue Adams
|
May 28, 2015 at 4:07 pm
Or perhaps not have as much spacing when the question wraps around into two lines? That would help the question stand apart from the answers a bit.
|
|
Dean
|
May 29, 2015 at 2:42 am
How about adding this:
.ee-reg-form-qstn-grp-dv > div.ee-reg-qstn {
margin-bottom: 30px;
}
#ee-single-page-checkout-dv .ee-radio-label-after {
margin-bottom: 10px;
}
Before
http://take.ms/xHpfC
After
http://take.ms/iU9P2
It will add some spacing to the text field questions though.
|
|
Sue Adams
|
May 29, 2015 at 8:42 am
So far, the best solution is the following code (although I still don’t like the spacing after the question and before the answers – sigh):
#ee-single-page-checkout-dv .ee-radio-label-after {
margin-bottom: 2px;
}
#ee-single-page-checkout-dv .ee-checkbox-label-after {
margin-bottom: 2px;
}
div.ee-reg-qstn {
margin-bottom: 15px;
}
|
|
Lorenzo Orlando Caum
|
May 29, 2015 at 9:26 am
Hi, it sounds like you have an updated CSS solution that is working for you.
Can we go ahead and update this support post to resolved?
—
Lorenzo
|
