[Resolved] HTML Widget help

[LE ROUX MIROITERIE]

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 !

[Leo]

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 🙂

[LE ROUX MIROITERIE]

Hello,

thank you for your help !

I disabled autooptimize and supercache so you can check.

[Leo]

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?

[LE ROUX MIROITERIE]

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

[Leo]

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

[LE ROUX MIROITERIE]

done

[Leo]

Not seeing any changes.

Also still seeing Autopimize and WP Super Cache activated.

[LE ROUX MIROITERIE]

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

[Leo]

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

[LE ROUX MIROITERIE]

Thank you so much, it’s perfect !!

[Leo]

No problem 🙂

[Author]

Posts