10 replies to this topic

[ilkka]

Hi there,

 

For some reason the simple nav bar at the bottom of my site is not centering when I reduce window size (eg. it is not centering properly on iPhone for example). How to fix it?

 

Here is my site:

Please Login or Register to see this Hidden Content

 

Also for some reason the grey image frame for the post thumbnails in blog page extends to screen edges on iPhone (

Please Login or Register to see this Hidden Content

). This looks realy ugly, how to fix it?

 

(By the way, I am using custom css to round the images. But this problem persists even if I remove to custom css to round my thumbnail images).

[Danny]

Hi,

 

What is your layout settings, are you using Responsive design ?

[ilkka]

Responsive with pixel width.

[Danny]

When I use that layout and resize my browser window, the Simple Nav looks like this:

Please Login or Register to see this Hidden Content

 

I am unable to recreate the issue, therefore, you either have some custom CSS/code or a plugin that is causing this issue. Try removing all your custom CSS and code, then see if this resolves the issue. If that doesn't work, disable all non-PageLines plugins and see if this resolves the issue.

[ilkka]

Hi,

 

I tried to remove all custom CSS but it didn't solve the issue. 

 

Actually the biggest problem is this:  the grey image frame for the post thumbnails in blog page extends to screen edges on iPhone (

Please Login or Register to see this Hidden Content

). This looks realy ugly. 

 

Please help me fix it. The frames seem to be default in Pagelines, how to get them work properly on iPhone?

[Rob]

Quite obviously, you've customized the CSS for the thumbnails to add a radius. Since you've done that, we'd be unable to provide a solution for the grey border spreading edge to edge on the iPhone.

 

I'd suggest using our

Please Login or Register to see this Hidden Content

available free in our Store to set specific CSS for iPhone.

[ilkka]

Ok,

 

I removed the rounded thumbnail corners. The grey frame will still extend to the screen edges. 

 

Can you please give me a custom code (or something) that will get rid of this default behavior?

 

The Browser specific CSS is really not an option here. This behavior happens on any small mobile screen (eg. when resizing chrome window). 

[Danny]

Ok, the issue you have is that your site is apparently set to the responsive layout with pixels layout option. However, when I go to my test site and use this layout option, I am unable to recreate your issue. Therefore, like I mentioned in my previous post, you have either a plugin, custom CSS/code or a section causing this issue.

 

I recommend you disable all non-PageLines plugins, remove your custom CSS and the Page border section and see if your site acts responsively on mobile devices.

 

Regarding the image border, add this to your custom CSS:

 

Please Login or Register to see this Hidden Content

[ilkka]

Thanks,

 

Disabling Page Border -section will center the simplenav correctly. Is it a bug in the Page Border Section?

 

Still can't get rid of the frame extension to screen edges, it is really annoying! I believe I didn't have this issue in platform 2.0 when I originally built the site. I think the thumbnails were bigger back then and they looked a lot better on iPhone. 

 

I have tried everything you suggested: disabling plugins, disabling page border section and removing all custom css. I enabled them all after testing, since I don't want to scare away my visitors.

 

With your CSS I can get rid of the frame alltogether. However the frame was looking nice on desktop site, I'd like to keep it... 

 

EDIT:

 

I tried to remove this CSS in Chrome Developer Tools:

.post-meta .c_img, .hentry .c_img {

display: block;

 

This is helping a bit. Still it sucks a bit.

[James B]

Hi there, looking at your page you've selected magazine mode with the first two posts showing full width.

 

The thumbnails for the two full with posts are using 'left in excerpt' under the panel - Feature Post Excerpt Mode

The rest of the thumbs on the page look like they've using 'left justified' in Clip Excerpt Mode

 

The above settings can be found in Pagelines>site options>blogs and posts. I'd suggest changing the settings from left justifed to match the left in excerpt in this page.

 

Page Borders is not a responsive section, I think this is why you're experiencing the problems with the layout.

[ilkka]

Ah, so simple!

 

Great it works now, changed the clip excerpt mode to "left, in excerpt". 

 

Thanks a lot!