Insert text boxes in column

[blaouchez]

Hello,

If I define the css in style.css, is it possible to insert text boxes as the attached example?

Regards

[Kyle – SUPPORT]

yes you can use the ‘boxed content’ page builder asset, you will have to edit the css to mach your design.

– Kyle

[blaouchez]

This is fine but if I create a css style in my style sheet “style.css” (child theme) and I call my style in “Box content”> in the “field “Extra class name” (Example class name “frame1” or “#frame1”), it does not work.

The name of my class is bad?

Pierre

[Kyle – SUPPORT]

Hi

Classes start with . not #

So say you add css for

.frame1 you would add only ‘frame’ in the extra class field.

– Kyle

[blaouchez]

This is great thank you but I have another problem.

When I defined 3 columns (screenshot1), if I use my css style “frame”, the formatting is ok but the third column drops below the line.

How to keep my three columns with my frames?

Pierre

[Kyle – SUPPORT]

You need to make your boxes smaller if they have a background

– Kyle

[blaouchez]

I reduced the third column to 28% (css: width: 28%;) and it works except when I lowered my window to the smartphone width, the bottom 28% (screenshot)

What therefore I have to change as parameters to reduce my third column?

This is an important issue for the success of my website.

Pierre

[Kyle – SUPPORT]

Please can you paste the css here that you used for your extra class. Make sure you highlight it and click the code button in your editor.

– Kyle

[blaouchez]

Hello Kyle,

I ask a lot of questions and I appreciate your patience.

Here is my css. It works with the value “em” (not “%”) but I don’t know if it’s correct for a developer. As I will use it often, I would prefer that you validating it:
.encadre {
color: #FFF;
background-color: #09F;
font-size: 18px;
padding: 15px;
width: 18em;
}

Pierre

[Kyle – SUPPORT]

You need to remove the width property.

– Kyle

[blaouchez]

It was too simple 😉
Thank you!

See you soon for a new question!

[Kyle – SUPPORT]

No problem!