Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2015-05-02 18:14:27

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,091
Website GitHub Mastodon Twitter

css problem on mobile

I’m working on porting one of my sites to mobile but pagespeed shows that I have a div which is wider than 320px. For the life of me I just can’t figure out how to fix it. Here is the pagespeed report. Please scroll down towards the bottom of the page where it says “User Experience”, on clicking “how to fix it” it says <div class="grid_18">...</div> falls outside the viewport.. The particular div has a 98% width (for screens under 950px) in a container which has 100% width.

Could someone spot the css bug?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#2 2015-05-02 19:02:10

GugUser
Member
From: Quito (Ecuador)
Registered: 2007-12-16
Posts: 1,473

Re: css problem on mobile

It seems to me that the width is in the HTML:

<a href="/events/the-mirror-stage"><img src="http://neme-imca.org/images/12.jpg" alt="the mirror stage exhibition" width="710" height="300" /></a>

Offline

#3 2015-05-03 03:23:49

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,196
Website

Re: css problem on mobile

I have no clue what pagespeed is complaining about…

It mentions <div class="grid_18">NeMe: Independ…ntemporary Art</div> as being too wide, but the only eventual occurrence in the source code is your site logo/name, which fits fine (iPod5, Firefox simulator at 320px, iPhone5s in the iOS simulator).


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#4 2015-05-03 06:39:44

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,091
Website GitHub Mastodon Twitter

Re: css problem on mobile

phiw13 wrote #290391:

I have no clue what pagespeed is complaining about…

It mentions <div class="grid_18">NeMe: Independ…ntemporary Art</div> as being too wide, but the only eventual occurrence in the source code is your site logo/name, which fits fine (iPod5, Firefox simulator at 320px, iPhone5s in the iOS simulator).

I’ve spent 2 days scratching my head for this and I eventually cracked it. I had a padding of 6px for the grid_18 container which caused an overflow to the right and beyond the viewport. I now implemented the padding for the h1 element and pagespeed likes it just fine.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB