Skip to content

Widget | CSS customization

Solved WordPress
53 2 18.9k 1
  • Sometime back, it handled huge traffic without lag, wordpress is just superb!
    alt text

    wrote on last edited by
    #23

    @Sala impressive!

  • @phenomlab I was expecting you would need my login information for this one, but you solved it without needing to log in! Congratulations! Another thing is that the website appeared to have been zoomed in when I viewed it once using a friend’s laptop, which I believe had a 14 or 15-inch screen. Do you experience this similar problem? Is it possible to make it that you can see a lot when you visit? Just like many forums

    “Late reply, my phone became really hot when applying that css” 🥵

    wrote on last edited by
    #24

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

    wrote on last edited by
    #25

    @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

  • wrote on last edited by
    #26

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

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

    wrote on last edited by
    #27

    @Sala said in Widget | CSS customization:

    probably they’re in some other container?

    Yes, likely.

  • @Sala said in Widget | CSS customization:

    probably they’re in some other container?

    Yes, likely.

    wrote on last edited by
    #28

    @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 said in Widget | CSS customization:

    In additional css, i’ve iframe { width 100% and height 315 but without important. If i add important, it affects the height of the ads

    It will do, yes, because you have this CSS present

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

    You’d need to be more specific here in terms of CSS target. The below would work

    .perfmatters-lazy-youtube img {
        height: 500px !important;
    }
    
    wrote on last edited by
    #29

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


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