Archived topic
HTML Widget help
11 replies · Started by LE ROUX MIROITERIE on August 27, 2019
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 !
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 :)
Hello,
thank you for your help !
I disabled autooptimize and supercache so you can check.
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?
In the two cases, it is the same thing, all is screwed up
Can you actually add it in so I can see the issue live instead of a screenshot?
done
Not seeing any changes.
Also still seeing Autopimize and WP Super Cache activated.
oh, sorry, now switched them back, you can see it ?
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>Thank you so much, it's perfect !!
No problem :)
