[Resolved] HTML Widget help

Home Forums Support HTML Widget help

  • This topic has 11 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #994840
    CĂ©dric

    Hello,

    I really need help with a piece of code please. I’m new to html and css

    I try to add a small picture 40px with text next to it.
    It’s okay for one, but all is screwed up when i try to add the second line.

    Can you please tell me what’s wrong with my code ?

    this is okay:

    <style>
    .imgBox, .textBox{
    float: left;
    box-sizing: border-box;
    }
    .textBox{
    height: 70px;
    width: 200px;
    color: white;
    text-align: left;
    padding-top: 5px;
    padding-left: 5px;
    }
    </style>
    
    <div>
    <div class="imgBox"><img src="https://lerouxmiroiterie.fr/wp-content/uploads/2019/08/icone-rapidite.png" width="40" height="40" alt=""></div>
    <div class="textBox">RAPIDITE D'INTERVENTION</div>
    </div>

    when i add one more line:

    <div>
    <div class="imgBox"><img src="https://lerouxmiroiterie.fr/wp-content/uploads/2019/08/icone-devis.png" width="40" height="40" alt=""></div>
    <div class="textBox">DEVIS GRATUIT</div>
    </div>

    all is broken.

    Thans for your help !

    #994848
    Leo
    Staff
    Customer Support

    Hi there,

    Are you adding the CSS inside the HTML widget? I would recommend keeping them separated and add the CSS using one of these methods:
    https://docs.generatepress.com/article/adding-css/

    Once you do that, can you add the HTML widgets in so I can see the issue live?

    Make sure to disable Autopimize and all caching plugins so I can inspect the code easier.

    Let me know 🙂

    #994885
    CĂ©dric

    Hello,

    thank you for your help !

    I disabled autooptimize and supercache so you can check.

    #994895
    Leo
    Staff
    Customer Support

    So what happens when you add the second block in?

    And what if you add it as a second HTML widget in the same widget area?

    #994900
    CĂ©dric

    In the two cases, it is the same thing, all is screwed up

    result

    #994903
    Leo
    Staff
    Customer Support

    Can you actually add it in so I can see the issue live instead of a screenshot?

    #994905
    CĂ©dric

    done

    #994909
    Leo
    Staff
    Customer Support

    Not seeing any changes.

    Also still seeing Autopimize and WP Super Cache activated.

    #994912
    CĂ©dric

    oh, sorry, now switched them back, you can see it ?

    #994923
    Leo
    Staff
    Customer Support

    Can you try this HTML instead?

    <div class="image-text">	
        <img src="https://lerouxmiroiterie.fr/wp-content/uploads/2019/08/icone-rapidite.png" width="40" height="40" alt="">
        <span>some text</span>
    </div>
    <div class="image-text">
        <img src="https://lerouxmiroiterie.fr/wp-content/uploads/2019/08/icone-rapidite.png" width="40" height="40" alt="">
        <span>some text</span>
    </div>

    https://www.screencast.com/t/ICYYDxUHaNV4

    #994930
    CĂ©dric

    Thank you so much, it’s perfect !!

    #994934
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.