Responsive Design & Centered Elements

[CraftyDevon]

Hello All,
I’m currently working on building out a site at thenegagementbureau.com, and am having some issues with my responsive design. (Using an iPhone 5 for testing).

While on a desktop, everything lines up as it should, yet when accessing the site from a mobile browser, I’m unable to get elements to respond to text-align: center, or margin: 0 auto. Common Sense told me I had overriding styles, yet that’s not the case, and while I’m still working out the kinks in using percentages for widths, I don’t believe that’s the reason for my margin: 0 auto’s not working at this point.

I still need to do a few things, such as convert my text to em’s, and sort out a few errant paddings, so bare with the work in progress.

I’d send a large batch of cookies to whoever could lend a hand with this, at the moment I’m looking at having to setup media queries for every single mobile device and assigning padding to the various elements in each. The overall design is very simple, it just needs to be centered across the board.

Thanks,
Devon

[Paulie_D]

`text-align: center`will only work on inline-block elements and the `margin: auto` will only work on elements with either a defined width or max-width.

Could that be it?

Are you using media queries on the container…I couldn’t see anyone when I re-sized?

[iknowdavehouse]

That link doesn’t work so I can’t see the problem…

You shouldn’t need to address any specific device if it’s working correctly.

I find margin: 0 auto; quite confusing at times… but you need to define the width of the element you’re centering…which isn’t always desired

[CraftyDevon]

Whoops, the correct link is theengagementbureau.com.

I do have a width: 100% applied to the containing element.

I’ll double check my inline levels, but those don’t seem to be the issue.

[Paulie_D]

A div is automatically 100% wide.

Your #container was 960px wide and, as i said, I didn’t see any media queries.

[CraftyDevon]

Hmm, I wonder why the media queries aren’t showing up for you, there are nearly 500 lines of code with them.

[iknowdavehouse]

There are media queries in there but they are device targeted…

@media only screen
and (min-device-width : 800px)

I’ve never used this… just min / max-width so I don’t know if that’s correct?

It’s not really “responsive”… You’ve probably written 3 times the amount of code you need to in order to re-size all these fixed widths. If you started out with a fluid framework using all percentages you’d find it much much easier.

[Paulie_D]

>There are media queries in there but they are device targeted…

>@media only screen and (min-device-width : 800px)

Not they aren’t….at least not specifically regardless of any comments in the file.

That’s not any device I am familiar with….It’s a perfectly reasonable breakpoint **if** the design needs to break at that point.

My issue (in S5) was that the largest (desktop) media query wasn’t taking effect…although it does in Chrome.

>If you started out with a fluid framework using all percentages you’d find it much much easier.

This I agree with but you are still going to need breakpoints.

[iknowdavehouse]

Sure – I just meant I didn’t know what “min-**device**-width” does opposed to “min-width” that’s all… I was assuming I wasn’t seeing any media queries coming into play on the desktop because of this.

[Senff]

@media only screen and (min-device-width : 800px) will be applied to any browser that is running on a device that has a screen smaller than 800 pixels wide

@media only screen and (min-width : 800px) will be applied to any browser which size is 800 pixels or less

So the first one looks at the screen size of the device. The second one looks at the size of the browser window (I prefer this because this can be replicated on a PC or Mac or whatever machine that lets you resize your browser).

[iknowdavehouse]

I see, that’s good to know… The former would be somewhat of a pain to test!

[Paulie_D]

So, at a guess the answer to the OPs question is to change the media query format from **device-width** to just **width**

[Author]

Posts