1

page cutoff

Hi everyone! So I'm having some problems trying to fix my client's site that has only one page doing what is shown on the screenshot. The problem is only on mobile and tablet. I tried messing with the meta tag and changing the viewport but that only fixed the tablet and made the mobile version blow up. The already-made template has fixed widths on the header and footer and the overflow: auto. Even when I removed the overflow it didn't change anything, so maybe it's the fixed widths that's the problem? Would anyone have any suggestions for how I could fix this?

Thank you all so much! --Arielle

4
  • Perhaps, rather than trying to fix a broken desktop view with some duct tape and string to make it work on mobile, you should re-design the page with mobile responsiveness in mind. It will look a lot prettier in the end, and your client will love you all the more. I'd be glad to give you more info on how to use CSS Media queries if you need some help getting started.
    – Liftoff
    Commented Jan 16, 2015 at 20:49
  • Oh and you might consider plugging your phone in. Your battery is a bit low.
    – Liftoff
    Commented Jan 16, 2015 at 20:51
  • I cannot do that since that's not in my client's budget. I didn't design this site, but I would definitely design it differently had I the chance. Commented Jan 16, 2015 at 21:00
  • Haha, thanks! I noticed that ;) Commented Jan 16, 2015 at 21:00

1 Answer 1

3

Easy just add the following then you can worry about viewport issues

body{ min-width:1000px; }
5
  • I found your site and applied the style so its defiantly going to fix it for you. did you add the css to line 4 of site.css ?
    – Nickfmc
    Commented Jan 16, 2015 at 22:02
  • you could add the min-width to div#page_wrapper instead however then you also need to add it to div#footerBottom
    – Nickfmc
    Commented Jan 16, 2015 at 22:06
  • Hmm... Yep I added it on the 4th line and then I tried it on the page_wrapper and footerBottom as you suggested (thank you so much by the way!)... It doesn't work. I have the code modified now but when I test it on mobile and tablet, the checkout page still doesn't work. Commented Jan 16, 2015 at 22:24
  • On the checkout page see that Blue image in a table. that is messing up that page, #divbtnSubmitOrder is absolutely positioned however I'm not sure why, I would just remove the Absolute positioning on line 499 it seams to layout better without positioning anyway
    – Nickfmc
    Commented Jan 16, 2015 at 22:55
  • Omgsh, you're incredible... That fixed it!!! Seriously, how can I thank you!?!?! I've been obsessing over this code for hours!! Commented Jan 16, 2015 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.