CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Matt
Matt

Reputation: 231

Center Div on Tablets

Site: https://dev.momentinaboxclub.com/ Area: About the box

I want this column to be centered on mobile devices. I am currently using this css in a media query:

.about-box {
   width: 90%;
   margin: 0 auto;
}

It seems to work on cell phones but on tablets the box is getting moved to the left. I can't figure out why it won't center. Please help.

Thank you!

Upvotes: 0

Views: 502

Answers (3)

MartinBA
MartinBA

Reputation: 797

Add display: flex; to .full_section_inner, just for medium devices, that should work!

@media only screen and (min-width: 768px) and (max-width: 992px){
    .full_section_inner{
        display: flex;
        justify-content: center;
    }
}

Upvotes: 0

bobby
bobby

Reputation: 166

In your HTML file there is a div that has a property: width: 66.66666667%;. If you change this to width: auto;, your issue will be resolved however it will get rid of the pink border around the text. If you add this line to your css file it should fix the alignment issue. 

.wpb_column.vc_column_container.vc_col-sm-8.vc_col-has-fill {
    width: auto;
    }

Screenshot with changes

Hope this helps!

Upvotes: 1

Johannes
Johannes

Reputation: 67748

There is a float: left in a media query for that element which affects tablet sizes and in your case applies to class .vc_col-sm-8 at min-width 768px.

Just add float: none; to your CSS rule for that element.

Upvotes: 1

Related Questions