iPad responsive design problem

This topic has 5 replies, 2 voices, and was last updated 11 years ago by Wes.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 24, 2013 at 11:48 am #4166
imajworks
Customer
I’m working on a site, in development, http://4newgrowth.com/preview, and I’m not getting the anticipated layout when the responsive design adjust for a vertical iPad view.

See screenshots below:

Legacy Demo, standard laptop view:

Legacy Demo, responsive view, iPad vertical orientation:

My client’s site, standard laptop view:

My client’s site, responsive view, iPad vertical orientation:

The third column on the bottom of the home page jumps down below:

As you can see, the three home page widgets are not adjusting to the responsive design on this particular layout.

The responsive design is working properly on the smaller, smartphone layout. Please help!
April 24, 2013 at 3:36 pm #4187
Wes
Moderator
This is happening because you’ve made some edits to your css file which affected the responsive code.

1. Change your “#home-bottom” back to 100% on line 3634 in your style.css file. It looks like you changed it to 96%.

2. Around line 3642 in your css, it looks like you removed – “width: 30%;“. This is needed in order to make the elements “responsive” otherwise they’ll stay at 300px which is a fixed width that won’t “respond”. Also, on this same line, you removed “.home-bottom-3“….you’ll need to add that back so the responsive width can be applied to that div/class. It should look like this –

`.home-bottom-1,
.home-bottom-2,
.home-bottom-3 {
margin-bottom: 20px;
width: 30%;
}`

That should make it all work again. Let me know if it does.
April 24, 2013 at 3:57 pm #4193
imajworks
Customer
Thank you for your help. This solution, however, doesn’t solve the issue. I’ve even added “!important” to the end of the width line. It still isn’t adjusting properly.
April 24, 2013 at 4:01 pm #4194
Wes
Moderator
I just checked your code and I don’t see any changes made….

Make sure the file is saved then hit reload on your browser.
April 24, 2013 at 4:21 pm #4201
imajworks
Customer
Woot! Thanks, Wes!
April 24, 2013 at 4:22 pm #4202
Wes
Moderator
You’re Welcome! Glad everything is working.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘iPad responsive design problem’ is closed to new replies.