Making things better: Tap targets are close to other nearby tap targets

Hello Aigars,

Just to make things perfect for the theme to get a better user experience;

When a post is shown on the front page, there are up to 4 positions for “date” “leave comment” “Category” and “Edit” (if you are admin). I want to change for example padding and text size of those objects with:

.posted-on {
   font-size:17px;
   padding:10;
}

But it doesn’t seem to work although display: none; works.

While we are at it, Font Awesome is loaded by the theme but can’t be disabled in the theme settings. When people install the Font Awesome WP plugin, the icons of the theme are gone, somehow they are called differently like “fa fa-comment-o” and not standard “icon-comment-alt”. I know that there are different version numbers of the Font in this theme so it might be that the Font used is outdated? Is there a workaround possible with CSS?

This is just to optimize the theme for mobile performance but does help for the desktop as well.

Thank you in advance,

-Ronald

EDIT: I know I can alter the code and where to find it but after an update it will be gone. This might be a good thing to add to the “to-do” list for a better Theme?

Okay, after looking around, I see now that:

Version 4 (like in the theme Dazzling) does:

<i class="fa-flag fa-2x fa-spin fa-border"></i>

Version 3 (plugin I am using but will change that):

<i class="icon-flag icon-2x icon-spin icon-border"></i>

Theme uses the latest Font Awesome icons currently 4.1 and we will always keep this library updates as new version will come out. Most Font Awesome plugins are now outdated because updating from version 3 to version 4 is not easy for them as all shortcodes are now different and users would have to update all those shortcodes manually. In our case it is slightly different and we will keep our Font Awesome library updated.

The plugins I was using were called Widget Icons and Font Awesome plugin 3.2.1… After 2 months I start to understand code so I might just look through the code of the Widget Icons plugin and see if I can get it to work as part of the theme (without stealing it).

Anyway, the Font question was just a secondary question to keep the website as smooth as possible with all the extra bells on it. Can you please look at my primary question? I just bought the fonts question up as it’s in the same area on the webpage ;).

As always, I’m really happy with your help! I learned a lot! Thank you!

-Ronald

Here is code that you can use to edit meta information in Dazzling theme. You can use it via Theme Options even with comments I have added myself. Of course, edit those values to get the results you were looking for.

/* Change meta info font color */
.entry-meta a {
	font-size: 17px;
}
/* Change meta info icon margin and size */		
.entry-meta .fa{
	font-size:14px;
	margin-right:3px;
}

/* Change margin between meta items	*/
.entry-meta span {
	margin-right:10px
}

I hope this was the answer you were looking for.

Hey, thank you for this. Some parts I could not find or I didn’t look in the right place somehow, sorry about that. I will post the values of what I’m going to use so google sill say it´s “okay” :).


A friend of mine was trying to get a website from the ground for over 4 years, it is and I’m looking to find a theme from you to put the WP plugin “Another WordPress Classifieds Plugin” in it. On both our websites I would like to place your logo if you are okay with that, just to say thank you again!

This is what needed to be done so Tap Targets are “okay” by google, also added more padding between them (20px):

/* Change meta info icon margin and size */	
.entry-meta .fa{
	font-size:14px;
	margin-right:3px;
	margin-top:6px;
	margin-bottom:6px;
}

/* Change margin between meta items	*/
.entry-meta span {
	margin-right:20px

Now I need to add your logo, most likely a resized versión from your headerlogo, say 50%. Can this be done by CSS?

This will give your theme a 100/100 User Experience for Mobile