[HiroiSekai]

Perfect, that looks good, thanks David.

There’s just one type of page left with this lingering issue: http://hiroi-sekai.com/stargazing-chocolate-baby/

How can we make that look the same as the other pages? Both on all desktop and mobile sizes.

Thanks again.

[HiroiSekai]

Hi,

That code is not working, either with or without the code you gave earlier in the thread. And how about anything past mobile width? There are problems with every single size scale of the media player right now.

[HiroiSekai]

Oh great, that fixed it. Thanks! Don’t know why those were turned on for 3 images (turns out it was 3), I literally just duplicated prior elements to achieve the effect.

Regardless, thanks again! If I can just get that audio player CSS looked into, that’ll solve all of my remaining issues. Cheers.

[HiroiSekai]

Hello,

No, every single element on the page is exactly the same, just two random images happen to be enlarged. It also doesn’t happen on certain devices for me, and clearing all caches (WP Engine, Cloudflare, WordPress, browser), didn’t work.

Also, any updates on the music player visual issues? I know this is fixable because it used to work properly before one of the big Cardinal updates.

Thanks

[HiroiSekai]

Okay, thanks.

Just one more issue has popped up as well on this page: http://hiroi-sekai.com/discover/

All of the images are placed in the Page Builder exactly the same, but two of the images are showing up in a massive size and covering the others around them. Why is this happening? I can’t find anything external classes affecting them either.

[HiroiSekai]

Hi,

Was this forwarded? It’s been 3 days and I realize there is no support over the weekends. I’d like this looked into by then.

Thanks.

[HiroiSekai]

Any updates on this?

[HiroiSekai]

Thanks for checking.

[HiroiSekai]

This reply has been marked as private.

[HiroiSekai]

Sure, if you’re using the Text view on the editor, give your image an ID if it’s just one image, or give it a class if it’s a group of similarly occurring images. Example:

Normal image insert
<img src="http://imgur.com/something.jpg" />

Image insert with ID
<img id="myImage" src="http://imgur.com/something.jpg" />

Image insert with class
<img class="myImages" src="http://imgur.com/something.jpg" />

If using the Visual view, just click on the image, click on the edit pencil and change the name in the Image CSS Class field. In your CSS,

Target ID names with:

#myImage {
filter: grayscale(100%); /* Standard CSS */
-webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
filter: gray; /* Internet Explorer IE6-9 */
-webkit-filter: grayscale(1); /* Old WebKit Browsers */
}

#myImage:hover {
filter: grayscale(0%);
filter: none;
-webkit-filter: grayscale(0); /* Old WebKit */
}

If it’s a class, just change the # to a . symbol. Remember, ID’s are for single-case objects and classes are for reoccurring things. Like if you’re wanting to do this for a header image in every single post you do, use a class. If it’s a single photo on a certain post, use an ID.

[HiroiSekai]

If you want to affect all images on the site (this will include things like header images, logos and so on), then add the following CSS:

img {
filter: grayscale(100%); /* Standard CSS */
-webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
filter: gray; /* Internet Explorer IE6-9 */
-webkit-filter: grayscale(1); /* Old WebKit Browsers */
}

img:hover {
filter: grayscale(0%);
filter: none;
-webkit-filter: grayscale(0); /* Old WebKit */
}

If you want to target specific images, give them a unique class in the page builder and target those using the same code.

[HiroiSekai]

Tried it, same problem.

[HiroiSekai]

This reply has been marked as private.

[HiroiSekai]

Hi David,

I am definitely on the newest version of WordPress. I tried out the code and it seemed to show up on desktop sizes (although it still overlaps the progress bar over the total time text and volume slider, screenshot attached), but the mobile devices still show an empty space. I tried clearing every single cache available and still nothing. Any ideas?

Also, is your first screenshot supposed to only have the progress bar stretch about 10% of the whole player? There’s still a large gap that doesn’t look too good.

Thanks as always.

Attachments:

You must be logged in to view attached files.

[HiroiSekai]

Thanks for the link, I am not using any tweaks or plugins for the search. It just gives a strange result which seems to mix and match between keywords in post titles and post content. Don’t know how to have it search universally for the keywords only within article titles.

I will definitely check out the link for excluding pages in the search.

For the time being, I’d like to check one more thing. I’ve been spending the last while doing a bunch of media query CSS for every device I could think of. One universal problem I still have is the WordPress audio player not displaying its progress bar, time and volume sliders properly. They just kind of float all over the place. If you look at this page (http://hiroi-sekai.com/stargazing-flower-in-green-nakajima-megumi/) on a phone, tablet and desktop they are all missing a volume slider as well as a track progress bar. On other pages (http://hiroi-sekai.com/phoenix-wright-remnants-of-the-past/) in a desktop view, the volume slider is shown, but completely underneath the player itself. Also, the track length is attached on the left hand side, still with no progress bar in sight.

I have attached two images to show my examples of what’s happening. What CSS do I need to change to ensure every mobile, tablet and desktop device will see the proper player with all of its features in the right place? (Basically, I need img1 and img2 to look like img3 on any device)

Thanks as always!

Attachments:

You must be logged in to view attached files.