Skip to content

Widget | CSS customization

Solved WordPress
53 2 19.3k 1
  • @Sala Working? From what I see, it is 🙂

    wrote on last edited by
    #22

    Sometime back, it handled huge traffic without lag, wordpress is just superb!
    alt text

  • 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


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 code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • The theme came with space on left side

    Solved WordPress css
    7
    3 Votes
    7 Posts
    2k Views
    Sala
    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah
  • 5 Votes
    2 Posts
    2k Views
    DownPW
    Nice. Very good tips Mark
  • 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
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    20k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Bottom footer navbar button extend

    Solved Customisation css javascript customisation footer navbar
    32
    9 Votes
    32 Posts
    16k Views
    phenomlab
    @DownPW said in Bottom footer navbar button extend: Oh my god, it’s beautiful mark I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept
  • 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.