Center Div on Tablets

Question

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!

Possible duplicate of [How to auto adjust the div size for all mobile / tablet display formats?](https://stackoverflow.com/questions/25211090/how-to-auto-adjust-the-div-size-for-all-mobile-tablet-display-formats) — First Name, Nov 14 '18 at 00:42
Post is a duplicate, search for responsive web pages, you need to include meta tags. — First Name, Nov 14 '18 at 00:43
Matt, familiarize yourself with your browser's document inspector. This sort of thing is trivial to diagnose these days once you do. — isherwood, Nov 14 '18 at 03:08

score 1 · Accepted Answer · answered Nov 14 '18 at 00:49

1

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.

answered Nov 14 '18 at 00:49

Johannes

64,305
18
73
130

Thank you (and everyone below) for taking the time to answer me. Sometimes when programming you just don't see the little stuff and I wasn't catching the float: left here. I appreciate it! – Matt Nov 14 '18 at 15:53

score 1 · Answer 2 · answered Nov 14 '18 at 01:53

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;
    }

Hope this helps!

MartinBA · Answer 3 · 2018-11-14T03:05:54.713

0

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;
    }
}

edited Nov 14 '18 at 03:05

answered Nov 14 '18 at 00:47

MartinBA

797
1
5
15

Center Div on Tablets

3 Answers3