Change the width size of columns in footer in html-CodePudding

I have the following html code:

<div >
    <div >

        <div >
            <div >
                <section id="text-6" >
                    <div >
                        <p>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1630.9930663068005!2d33.3123738581399!3d35.15696659507997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14de1a431c0b1493:0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2s!4v1525094860862"  frameborder="0" style="border:0" allowfullscreen/>
                        </p>
                    </div>
                </section>
            </div>

        </div>

        <div >
            <div >
                <section id="text-22" >
                    <h4 >Πολιτικές</h4>
                    <div >
                        <p>
                            <font color="#FFFFFF">
                            </p>
                            <ol>
                                <li>
                                    <a href="https://apostolosloukas.org/privacy-policy/">
                                        <font color="#FFFFFF">Πολιτική Απορρήτου</font>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://apostolosloukas.org/cookie-policy/">
                                        <font color="#FFFFFF">Πολιτική Cookies</font>
                                    </a>
                                </li>
                            </ol>
                            <p>
                            </font>
                        </p>
                    </div>
                </section>
            </div>

        </div>

    </div>
</div>

I'm using bootstrap.min.js ver 4.5.2.

I need to increase the width of section id text-6 and decrease the width of section id text-22.

When I'm using the following ccs code, the width of both columns changes.

.footer-top-box  {
    width: 120%;
}

Any help please?

CodePudding user response：

The classes col-lg-6 imply taking 6 of 12 columns above the large breakpoint. You can simply change them according to the Bootstrap grid strategy. Here I've switched to the small breakpoint and added color for better demonstration.

Other tips:

Iframes and lists shouldn't be inside paragraphs. The WordPress editor may have done that, but they can be switched to divs. Paragraphs can only contain "phrasing" content.
Paragraphs shouldn't be used for spacing. There are several here with no content. Use margin or padding instead. Bootstrap has spacing classes for that.

/* styles for demonstration purposes */

.row>div {
  background: pink;
}

.row>div:last-child {
  background: #bbb;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <section id="text-6" >
          <div >
            <p>
              Iframe here (inappropriately inside a paragraph).
            </p>
          </div>
        </section>
      </div>
    </div>

    <div >
      <div >
        <section id="text-22" >
          <h4 >Πολιτικές</h4>
          <div >
            <p>
              <font color="#FFFFFF">
            </p>
            <ol>
              <li>
                <a href="https://apostolosloukas.org/privacy-policy/">
                  <font color="#FFFFFF">Πολιτική Απορρήτου</font>
                </a>
              </li>
              <li>
                <a href="https://apostolosloukas.org/cookie-policy/">
                  <font color="#FFFFFF">Πολιτική Cookies</font>
                </a>
              </li>
            </ol>
            <p>
              </font>
            </p>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>