Skip to content

Widget | CSS customization

Solved WordPress
53 2 18.9k 1
  • @Sala In mobile view, it looks fine already

    7b1e88df-e6b9-4862-9f4f-8620ef4328ce-image.png

    wrote on last edited by
    #35

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

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

    wrote on last edited by
    #36

    @Sala No, it isn’t

    f972f4cd-f3f0-467e-a825-ef0d62213391-image.png

  • @Sala No, it isn’t

    f972f4cd-f3f0-467e-a825-ef0d62213391-image.png

    wrote on last edited by
    #37
  • wrote on last edited by
    #38

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

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

    wrote on last edited by
    #39

    @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 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

    wrote on last edited by
    #40

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

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

    wrote on last edited by
    #41

    @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 What do you get if you try in incognito? It works fine for me.

    wrote on last edited by
    #42

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

    Is this a video issue or its the article image?
    alt text

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

    Is this a video issue or its the article image?
    alt text

    wrote on last edited by
    #43

    @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.

  • @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.

    wrote on last edited by
    #44

    @phenomlab sure, let me compose myself, because the css currently is wrapped up. But, what of the height if we remove its going to use the image height which sometime back i saw them occupying a large space.

    div.text is affecting even yt video d**n, that brings up the picture 👍

  • @phenomlab sure, let me compose myself, because the css currently is wrapped up. But, what of the height if we remove its going to use the image height which sometime back i saw them occupying a large space.

    div.text is affecting even yt video d**n, that brings up the picture 👍

    wrote on last edited by
    #45

    @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

  • @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

    wrote on last edited by
    #46

    @phenomlab On it sir

  • @Sala it will affect that because you are targeting all img elements - this is why I said to remove that CSS block

    wrote on last edited by
    #47

    @phenomlab done, its resubmitted on google. I am composing another article so we can clarify if that was the problem. Talk to you later

  • @phenomlab done, its resubmitted on google. I am composing another article so we can clarify if that was the problem. Talk to you later

    wrote on last edited by
    #48

    @Sala Ok. Keep me posted.

  • @Sala Ok. Keep me posted.

    wrote on last edited by
    #49

    @phenomlab new article has been index though we have the same issue. At least not from article image, this time its the image from the video?
    alt text

  • @phenomlab new article has been index though we have the same issue. At least not from article image, this time its the image from the video?
    alt text

    wrote on last edited by
    #50
  • wrote on last edited by Sala
    #51

    @phenomlab Hi, thanks for the additional info, it would help people online by comparing. For us we finally found a solution fixing the videos totally in a different way. It was detailed with one of our member. It appears that google has made some changes over these recent days. We’re formulating a plan on how we would save old and future articles. It has been a joy though hell of a ride.

  • wrote on last edited by
    #52

    @phenomlab Hi, please help us to hide the cap links from crawlers. P - pakistan which is on homepage.

    alt text

  • @phenomlab Hi, please help us to hide the cap links from crawlers. P - pakistan which is on homepage.

    alt text

    wrote on last edited by
    #53

    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • 3 Votes
    2 Posts
    2k Views
    DownPW
    Very great
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    3k Views
    Sala
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.