Styling issues, need help!

It’s been 3,5 weeks and I’d really love a response to this by the author, but if anyone else would be able to help, I’d also highly appreciate it.

Sorry for the late reply, I’m still on vacations and only carry current projects I’m working on with me.

I have checked the site. There are two observations:

1. Numbers and labels (hours, minutes, etc.) are not vertically aligned due to top:1.5px style on labels. Not sure where it comes from, as I said I don’t have WP code right now.
2. Texts before and after the counter are not vertically aligned, which is a known issue. All-inline layout is not easy to style without using latest CSS3 directives (like flex, etc.) This plugin was written when CSS3 was not a standard yet. I didn’t have chance to update the plugin.
3. I guess that plugin rendered on your page doesn’t strictly correspond to the shortcode sample you provide it your message. Could you send me actual shortcode, so that I can reproduce the issue on my dev machine.

I will try to see if I can fix it when I return to office (should be second week for September), but I cannot promise, sorry.

P.S. You can send more details in ticket if you prefer.

Hi Alex, thank you so much for your reply. Much appreciated that you took the time to let me know you saw my request. ??

The complete shortcode that is currently on the page:
[smartcountdown import_config="scd_easy_recurrence::2" mode="countdown" layout_preset="shortcode_compact_titles_inline_labels_right.xml" text_before_size="20" title_before_down="Hang in there! Just" digits_size="20" labels_size="20" units="days,hours,minutes" text_after_size="20" title_after_down="until the next stream." widget_style="margin-left:auto; margin-right:auto;" /]

I’ll have to look into the 1.5px style as well, to find out if it comes from my theme or anything. Let’s keep this thread going and come back to it when either of us finds something. Together I’m sure we’ll be able to squash the issue!

Thanks again and enjoy the rest of your vacations!

I don’t think 1.5px style comes from a theme, in web inspector this style is an element style, i.e. inline, set by client JS plugin code.

It would be handy to review custom preset xml file you are using. You can attach it to a message in ticket thread (don’t think a forum is right place for xml attachments).

However as I said I don’t have access to my WP development installation until next weekend. I will take a look at the issue.

I could just paste the content of the file in here, if that helps?

<?xml version="1.0" encoding="UTF-8"?>
<layout>
 <paddings>
  <years>1</years>
  <months>2</months>
  <weeks>1</weeks>
  <days>2</days>
  <hours>2</hours>
  <minutes>2</minutes>
  <seconds>2</seconds>
 </paddings>
 <layout>horz</layout>
 <event_text_pos>vert</event_text_pos>
 <labels_pos>right</labels_pos>
 <labels_vert_align>middle</labels_vert_align>
 <hide_highest_zeros>1</hide_highest_zeros>
 <allow_all_zeros>0</allow_all_zeros>
 <responsive value="1">
  <scale value="0.5">
   <layout>vert</layout>
   <labels_pos>row</labels_pos>
   <event_text_pos>vert</event_text_pos>
  </scale>
  <scale value="0.8">
   <layout>horz</layout>
   <labels_pos>col</labels_pos>
   <event_text_pos>vert</event_text_pos>
  </scale>
 </responsive>
</layout>

I’m really sorry! There was an error in documentation.

“text_before_size” and “text_after_size” attributes are not valid, should read “title_before_size” and “title_after_size” respectively.

That is why text size settings didn’t have effect.

About digits / labels alignment. <labels_vert_align> is set to “middle” in your layout preset. Try making digits slightly bigger than labels (actually you have both set to 20) or set another vertical alignment for digits, e.g. “top”.

No worries, Alex. Mistakes happen. I’m just glad I was able to help you correct them and that you’re helping me fix things. ??

I have changed the size attributes to title_before_size and title_after_size like you said. I have also changed the <labels_vert_align> in the xml to top. I haven’t changed anything else.

The result is this: https://i.imgur.com/mbubzUa.png

Much better and I’m very happy with the improvements, but it’s not quite perfect yet. Any more suggestions we could try? ??

• This reply was modified 6 years, 4 months ago by superlisa.