Menu text color and other queries

So I finally solved 2 of my questions above. Pasting again the ones I haven’t figured out yet:

1. I wanted the publishing date and “comments” to be directly under the heading/page title, to allow more space for content/blog post. I used the code provided in the forum but it’s not working. Help?

2. My site logo is still too small on mobile. Already tried this and this but none are working. The latter even erases all the changes I made. Please help.

3. Is it possible to hide the tags under each post? It looks really cluttered down there. Thank you so much!

My blog is daphnebenosa.com. Thank you!

1. I wanted the publishing date and “comments” to be directly under the heading/page title, to allow more space for content/blog post. I used the code provided in the forum but it’s not working. Help?

Could you link to the code you used so I can take a look?

2. My site logo is still too small on mobile. Already tried this and this but none are working. The latter even erases all the changes I made. Please help.

This works well for me when added in the browser inspector:

@media (max-width: 520px) {
#masthead .site-branding {
    background-size: 200% auto;
}
}

Are you adding this via a custom CSS plugin? Are you adding it to the bottom, below any other custom CSS?

3. Is it possible to hide the tags under each post? It looks really cluttered down there. Thank you so much!

The categories and tags are output in the same HTML element, so the easiest thing to do is hide them both on single posts with this CSS, would that do the trick?

.single .entry-meta {
  display: none;
}

1. Could you link to the code you used so I can take a look?

I am using the code given in this thread, but the post date and “comments” are still on the left.

2.
@media (max-width: 520px) {
#masthead .site-branding {
background-size: 200% auto;
}
}

This is the one I’m currently using but it’s not making much of a difference. Site logo is still too small when viewed on mobile.

I’m using the Jetpack CSS Plugin.

3.
.single .entry-meta {
display: none;
}

Yay this worked! Thank you!

4. Also I have the problem with featured image not showing up when posting on Facebook. In the old theme I was using (Highwind), I didn’t have to use the Featured Image feature as it just fetches the first photo in the post. So I also tried not using the featured image feature in Sela and same thing happens. Any idea how to fix this? Thank you so much!

Let’s look at #4 first, and my colleague thesacredpath is going to chime in about the other two outstanding issues.

4. Also I have the problem with featured image not showing up when posting on Facebook. In the old theme I was using (Highwind), I didn’t have to use the Featured Image feature as it just fetches the first photo in the post. So I also tried not using the featured image feature in Sela and same thing happens. Any idea how to fix this? Thank you so much!

To debug this sort of issue, a good first step is putting a post’s URL into Facebook’s debugging tool and see if it shows any errors:

https://developers.facebook.com/tools/debug/

I took this sample post first:

https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/

It came back with an error about the og:image, which is the tag that sets the Open Graph image shared to Facebook:

og:image could not be downloaded or is too small og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that’s at least 200x200px and is accessible from Facebook. Image ‘https://daphnebenosa.com/wp-content/uploads/2012/11/chadverzosa_daphnebenosa4.jpg.jpg’ will be used instead. Consult https://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.

When I share this post on Faceboook, I do get the Fallback image Facebook mentions in the error above

https://daphnebenosa.com/wp-content/uploads/2012/11/chadverzosa_daphnebenosa4.jpg.jpg

I also checked the og:image tag itself on the post:

<meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0833-1024x749.jpg" />

That image is accessible and meets Facebook’s size requirements. When I clicked the “scrape new fetch information” button, I got this error returned from Facebook:

Object at URL ‘https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/, https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/.

Sela does not set your site’s Facebook Open Graph tags, but it does look like you have a duplicate set of them. If you view your browser’s source, you’ll see this:

<meta
property="og:title" content="Natural Looks, Famed for Fragrance, Has Arrived in the Philippines – Metamorphosis"><meta
property="og:site_name" content="Metamorphosis"><meta
property="og:url" content="https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/"><meta
property="og:locale" content="en_us"><link
rel="image_src" href="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0833-1024x749.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0833-1024x749.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/two-1024x612.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0828-1024x906.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0831-1024x783.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4639-1-1024x944.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/four-1024x725.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4640-1-999x1024.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4636-1-1024x1024.jpg" /><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4622.jpg" />

Then further down you have:

meta
property="fb:admins" content="https://facebook.com/daphnebenosa"/><meta
property="og:url" content="https://daphnebenosa.com/natural-looks-famed-for-fragrance-has-arrived-in-the-philippines/"/><meta
property="og:title" content="Natural Looks, Famed for Fragrance, Has Arrived in the Philippines"/><meta
property="og:site_name" content="Metamorphosis"/><meta
property="og:description" content="Happy new year, everyone! 2015 has gone and now we're welcoming another. Many of you have probably completed your New Year's resolutions or are already working"/><meta
property="og:type" content="article"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2012/11/chadverzosa_daphnebenosa4.jpg.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4622.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4636-1-1024x1024.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4640-1-999x1024.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/four-1024x725.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/IMG_4639-1-1024x944.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0831-1024x783.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0828-1024x906.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/two-1024x612.jpg"/><meta
property="og:image" content="https://daphnebenosa.com/wp-content/uploads/2016/01/DSC_0833-1024x749.jpg"/><meta
property="og:locale" content="en_us"/>

I’d suggest deactivating all your plugins to see if that gets rid of the two sets, and then reactivating one by one to figure out where the duplicate is coming from.