CODEWITHSUNDEEP
cssweb-frontenddivi
aicesanchez
aicesanchez

Reputation: 81

How do I place two modules side by side in the same column in divi?

I am using Divi to develop a website. I am doing the header which contains a row separated in three columns. One of these columns has to have two modules next to each other: one image module (the three dots is a png file) and a social media module.

I have tried assigning a class to both and then using CSS in the Divi theme options but it didn´t work. The CSS I used is:

.header-social-image{ display:flex; }

I attach an image of the current state of the column and the wanted result.

Current column Wanted result

Upvotes: 0

Views: 4629

Answers (3)

Fran
Fran

Reputation: 564

When you insert a column there is a Specialty option between Regular and full with, maybe one of them can help. Look for the attached image

Upvotes: 0

neohaojun
neohaojun

Reputation: 312

You probably need to use the <span> tag. By default, most HTML elements are block-level elements, meaning that they will not display on the same line. <span> helps to resolve this by converting these elements into inline elements, which displays in a single line.

Thus, you need to embed your modules in an overarching <span> tag to display accordingly.

Upvotes: 0

Deadpool
Deadpool

Reputation: 8240

Do you want something like this?

.container {border: 1px solid #000; display: flex;justify-content:space-between;}
.dots {border: 1px solid brown;}
span {display:inline-block;height:50px; width: 50px;border-radius:50%;margin:10px;}
.red{background: red;}
.blue{background: blue;}
.green{background:green;}

.social_media {border:1px solid #000;}
.fb{color:blue;font-size:36px;}
.tw{color:aqua;font-size:36px;}
<div class="container">
  <div class="dots">
    <span class="red"></span>
    <span class="blue"></span>
    <span class="green"></span>
  </div>
  <div class="social_media">
    <span class="fb">FB</span>
    <span class="tw">Tw</span>
  </div>
</div>

Upvotes: 1

Related Questions