container is not centering on the page - CSS/HTML

Question

I am having an issue trying to centre the elements within the .footer-strip-container on the page. It doesn't seem to shift to the centre unless I add some side padding for #text-5 element and I am not sure why that is. I want the elements to be centred if the screen is max 1364.

Below is my html and CSS:

    #text-5{
        width:100% !important;
    }
    
    .footer_wrap_inner > .content_wrap{
        width:100% !important;
    }
    
    .footer-strip-container{
        width:100%;
    }
    
    .float-child{
        width:50%;
        float:left;
    }
    
    .footer-strip-col1{
        text-align:left;
    }
    
    .float-text{
        font-size:24px;
        padding-left:50px;
    }
    
    .float-text,
    .float-img{
        float:left;
    }
    
    .footer-strip-col2{
        text-align:right;
    }
    
    @media only screen and (max-width: 1364px) {
      .float-child {
        width:100%;
            float:none;
            clear:right;
      }
    }

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
       <div class="textwidget">
       <div class="footer-strip-container">
          <div class="float-child">
             <div class="footer-strip-col1-text">
                <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" alt="Join Balance" class="float-img"><br>
                <span class="float-text">Join Balance and get 20% off your first order</span>
             </div>
             <p></p>
          </div>
          <div class="float-child">
             <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
          </div>
       </div>
    </div>
    </aside>

@TusharShahi, because when it's desktop, I want the img, text and input form to be inline. Only when it goes to @ media then it changes so that image on left hand side, next to it is text and underneath text is the form — BruceyBandit, Jul 13 '21 at 05:15

Om Nigam · Answer 1 · 2021-07-13T05:20:03.673

0

All you need to do is to add to replace your .footer-strip-container code with this

.footer-strip-container{
    width: 50%;
    margin: auto;
}

and your div would be centered

if you want your parent container to be 100% then use this code

@media only screen and (max-width: 1364px) {
    .float-child {
        width: 50%;
        float: none;
        clear: right;
        margin: auto;
    }
}

edited Jul 13 '21 at 05:20

answered Jul 13 '21 at 05:01

Om Nigam

122
1
12

But the container needs to be full width – BruceyBandit Jul 13 '21 at 05:14
then you need to use the second snippet – Om Nigam Jul 13 '21 at 05:20
It's strange because I thought of that as well before and attempted it but still doesn't centre the elements – BruceyBandit Jul 13 '21 at 05:31
for me it does please try again to do so – Om Nigam Jul 13 '21 at 05:33
Sorry, it doesn't work for me – BruceyBandit Jul 13 '21 at 05:41
can u please bother making a codepen for your project ? – Om Nigam Jul 13 '21 at 05:50
@BruceyBandit making a codepen for the project would be really helpful for accurate answering – Om Nigam Jul 13 '21 at 06:00
https://codepen.io/avicdr/pen/ExmNrbz check this i've used the same css for centering – Om Nigam Jul 13 '21 at 06:25

score 0 · Answer 2 · answered Jul 13 '21 at 06:45

You shouldn't use float use flexbox instead

.footer-strip-container {
  display : flex;
  justify-content : center;
  width: 100%;
}

.float-child {
max-width : 50%;
}

.footer-strip-col1 {
  text-align: left;

}

.footer-strip-col1-text {
  display : flex;
  align-items : center;
}

.float-text {
  font-size: 24px;
  padding-left: 50px;
}

.footer-strip-col2 {
  text-align: right;
}

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
        <div class="textwidget">
            <div class="footer-strip-container">
                <div class="float-child">
                    <div class="footer-strip-col1-text">
                        <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif"
                            alt="Join Balance" class="float-img">
                        <span class="float-text">Join Balance and get 20% off your first order</span>
                    </div>
                    <p></p>
                </div>
                <div class="float-child">
                    <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
                </div>
            </div>
        </div>
    </aside>

score 0 · Answer 3 · answered Jul 13 '21 at 07:31

display:flex will reduce a lot of unnecessary CSS code. Here's a complete guide on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.footer-strip-col1-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.float-text {
  font-size: 24px;
  padding-left: 50px;
  text-align: center;
}


/*define media query size, for demonstration I used 991px*/

@media only screen and (max-width: 991px) {
  .footer-strip-col1-text {
    flex-direction: column;
  }
  .float-text {
    padding-left: 0;
    padding-top: 20px;
  }
}

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
  <div class="textwidget">
    <div class="footer-strip-container">
      <div class="float-child">
        <div class="footer-strip-col1-text">
          <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" alt="Join Balance" class="float-img">
          <span class="float-text">Join Balance and get 20% off your first order</span>
        </div>
        <p></p>
      </div>
      <div class="float-child">
        <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
      </div>
    </div>
  </div>
</aside>

container is not centering on the page - CSS/HTML

3 Answers3