skip to Main Content

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

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search