Responsiveness

GRINSTUDIO · August 2016

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

GRINSTUDIO · August 2016

Ignore question 2 on mobile, I have fixed this.

Albert · August 2016

Hi,

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; }

MOBILE

1. If you look at http://pasteboard.co/JFQl0YRx.png you see that you set HIDE ON MOBILE style for section where those items are.

GRINSTUDIO · August 2016

Hello,

Thanks for your response. Mobile all ok now. The css supplied for the h2 tag isn't really solving the problem as on an iPad the following pages aren't looking right:

http://alutechsystems.co.uk/ (Our Products, 4 column section)

http://alutechsystems.co.uk/products/

http://alutechsystems.co.uk/project-portfolio/

They are all 4 column layout and although breaking the text via the css helped, is there anyway to reduce the h2 font on a tablet view only, perhaps that would help?

Thanks for your help.

Luci

Albert · August 2016

But which H2 tag you want to decrease on iPads? Where is it exactly?

GRINSTUDIO · August 2016

On all these two pages the words 'Our Products'

http://alutechsystems.co.uk/

http://alutechsystems.co.uk/products/

And on this page all of the titles, e.g. 'Volta Business Centre, Minsk' and 'Audi Centre, Nizhny...' etc

http://alutechsystems.co.uk/project-portfolio/

Albert · August 2016

Ok. So to decrease those font sizes on smaller devices, you need to use an extra css:

@media only screen and (min-width: 768px) and (max-width: 959px) {
    h2 { font-size: 10px !important; }
}

More details about @media you can find on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Responsiveness

Comments

This website uses cookies