Skip to content

Widget | CSS customization

Solved WordPress
53 2 18.9k 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
  • 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
  • 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
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    893 Views
    No one has replied
  • Bottom footer navbar button extend

    Solved Customisation css javascript customisation footer navbar
    32
    9 Votes
    32 Posts
    15k 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
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    6k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    10k Views
    RiekMedia
    @phenomlab okay