Skip to content

Widget | CSS customization

Solved WordPress
53 2 18.9k 1
  • @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/

    wrote on last edited by phenomlab
    #30

    @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 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;
       }
    }
    
    wrote on last edited by
    #31

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

    wrote on last edited by
    #32

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

    38198d2b-8636-4419-ada2-c92056ede95c-image.png

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

    38198d2b-8636-4419-ada2-c92056ede95c-image.png

    wrote on last edited by
    #33

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

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

    wrote on last edited by
    #34

    @Sala In mobile view, it looks fine already

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

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


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
  • CSS border gradients

    Blog gradient border css
    10
    3
    2 Votes
    10 Posts
    3k Views
    cagatay
    ah f5 need
  • Switch between list and card view function

    Moved Let's Build It cards layout css
    107
    1
    50 Votes
    107 Posts
    57k Views
    phenomlab
    @crazycells [image: image.png] [image: image.png]
  • 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.
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    6k Views
    phenomlab
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    168k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • 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.