[Solved] Struggling with Responsive Layout; What Am I Missing?

[ballou83]

Hey guys,

Sorry my first post is after some help; I guess I will have to make up for it in the future. Forgive me.

Basically though, I have built a site for a friend and I have completely rearranged the layout of the original wp theme I was using which was readily responsive.

I am now having a few issues making the site look good on anything other than a desktop, and basically just want the site to look the same on all screens.

I have commented out <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> and I have got rid of all the original media styles, but the sidebar is still dropping below the content.

I have tried adding new styles as media queries, as it seems to be a width issue (I think) but nothing is working.

I’m sure someone with a bit more experience with media queries will know straight away what I’m doing wrong, so any help would be hugely appreciated.

The site is at ladybelleweddings.com for anyone with an iPhone/iPad who could help me out please. Cheers :)

[Paulie_D]

Please don’t do this maximum-scale=1…it’s poor UX for anyone who doesn’t have 20/20 eyesight.

Next question, what should the sidebar do at lower screen widths?

There also seems to be a lot on inline CSS…you probably need to extract all that to the stylesheet.

[ballou83]

It was already in the theme, but I will take note cheers. :)

[Paulie_D]

Ok…frankly, the menu is messed up at under 1090px width.

The footer has a fixed width etc.

I could go on but it looks like you have a shipload of work to do to get this responsive.

[ballou83]

Ha, yes I see your point. That’s why I gave up with making it responsive and decided to just have it display the same on all screens, but it still ain’t lying right.

I know enough CSS to get by, but I struggle when it comes to media queries, and so really just want to know what to do to make it appear the same (as on a desktop) across all screen widths (smartphones, tablets etc).

Cheers

[Paulie_D]

really just want to know what to do to make it appear the same (as on a desktop) across all screen widths (smartphones, tablets etc).

Not a realistic target. Something that is 1060px wide is going to be unreadable at 480px.

If that truly is your aim, dump all the responsiveness, fix everything in fixed pixel widths and make the user zoom in (see my comment about maximum scale though).

They won’t thank you for it though.

I have completely rearranged the layout of the original wp theme I was using which was readily responsive.

My question though is, if you had a responsive theme to start with (and I understand this is still a WP site) why did you strip out all the responsive parts?

[ballou83]

OK cheers for your help.

[Author]

Posts