Widget | CSS customization

[phenomlab]

@Sala hmm - are you sure that your friend isn’t using zoom at the browser level? There’s nothing that would make your site zoom by default. Your friend may also be using large fonts which can make sites already to look larger than they actually are.

[Sala]

@phenomlab i suspect the ads inside the content in articles , are not benefiting from full width of the article div container, probably they’re in some other container? Bcoz all the time (on mobile) they’re positioned at center and with a small width

[Sala]

I will inspect next time, and take some screenshots of the zoom issue.

[phenomlab]

@Sala said in Widget | CSS customization:

probably they’re in some other container?

Yes, likely.

[Sala]

@phenomlab we break that container, when some time ever comes. Full width has potential of increasing chance of click, tho could sound annoying, i know

[Sala]

@phenomlab it appears this css didn’t take effect, despite using ! important. If you able to see the path, i could change it from cpanel. Google reported the same issue today.

.perfmatters-lazy-youtube img{height:315px!important}

Page example: view-source:https://sopriza.com/how-kenya-can-use-films-to-attract-more-tourists/

[phenomlab]

@Sala Try locating the CSS block

div.text img

And replace it with

div.text img:not([data-perfmatters-preload])

So, you land up with

@media (min-width: 800px) {
div.text img:not([data-perfmatters-preload]) {
    width: 100%;
    height: 315px;
   }
}

[Sala]

@phenomlab 480*360 its being read from the ytimage so it could be a background img? I have attempted to apply the last css 2 mins ago, and it did not work

[phenomlab]

@Sala Works for me - are you testing this on a desktop? The mobile CSS is a different class

[Sala]

@phenomlab i am refreshing the view:source url using mobile, please let me have the class for mobile, i apply

[phenomlab]

@Sala In mobile view, it looks fine already

[Sala]

@phenomlab surprisingly on source code the yt thumbnail is still width=“480” height=“360”

[phenomlab]

@Sala No, it isn’t

[Sala]

@phenomlab

[phenomlab]

@Sala Those are just placeholders and inherited from the iframe embed. If you change those values, nothing will happen.

[Sala]

@phenomlab you know the current yt video size is 400 * 225, on that line at the end of that code and still its reported to be very tall. So these placeholders could be the culprit

[phenomlab]

@Sala What do you get if you try in incognito? It works fine for me.

[Sala]

@phenomlab we are called off for supper, will attempt to check using that, the browser would have to start a fresh. Catch up on later. Many thanks bdw

[Sala]

@phenomlab i also believe the video is okay, though the report is still unclear.

Is this a video issue or its the article image?

[phenomlab]

@Sala That’s telling you that the video is too tall, and doesn’t meet Google’s criteria. You should remove the CSS below and be more specific with image sizes

div.text img {
    width: 100%;
    height: 315px;
}

You are targeting all img tags with this CSS, which is less than desirable. Let’s first remove this CSS and see if that resolves the Google crawl issue which I’m confident it will.