Responsiveness
Hi, I am testing my website across various devices and having a few problem. URL: http://alutechsystems.co.uk
IPAD
- There's quite a few elements on the homepage which aren't working well responsively on an iPad at all. Namely, 4 column areas and list items. It doesn't look like it's automatically decreasing sizes when viewed on an iPad, even though that option is switched on in the background.
- On the About page http://alutechsystems.co.uk/about/ – the left hand column overlaps right hand column on an iPad/
- Project Portfolio page http://alutechsystems.co.uk/project-portfolio/ isn't looking good either on an iPad.
MOBILE
- 4 column areas aren't displaying on a mobile at all, so the product page displays nothing – http://alutechsystems.co.uk/products/
- Contact us page http://alutechsystems.co.uk/contact-us/ – the area which contains the address, on a mobile this floods blue which makes the text illegible.
Can you please help?
Thanks, Luci
Comments
IPAD
1. To align items properly on mobile devices, you need to use DIVIDER item between rows.
2. The first column overlap the second because of not enough space on mobile. So if you don't want this column to be overlap, you need to remove placeholder item which is the first, invisible one.
3. On this page everything looks good except h2 tags which are too big for ipad. What you can do is break those words on smaller devices what can be done with the following css:
h2 { word-wrap: break-word !important; }MOBILE1. If you look at http://pasteboard.co/JFQl0YRx.png you see that you set HIDE ON MOBILE style for section where those items are.