How do I centre webpage in Safari browser

By dizzyone on 6 Jul 2016 at 09:00 UTC

Hi everybody,

Have hunted high and low and cannot find an answer to probably, what is to most, a simple question.

I am using Bartik and I need, quite desperately, to be able to centre my website in the Safari browser. It centres in Firefox and IE, but, for some unknown reason, it aligns left in Safari.

Hope you can help.

Thanks.

Pam

Comments

Should be centered in Safari,

Jeff Burnz commented 6 July 2016 at 09:59

Should be centered in Safari, what version - iOS or OSX?

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Safari browser- centering

dizzyone commented 6 July 2016 at 10:22

Hi Jeff

Thanks for helping.

It appears left on ipad - iOS.

K. rgds

Pam

Safari centering

dizzyone commented 7 July 2016 at 13:19

Could anyone possible throw any light as to why my website centres in firefox and ie, but not Safari?

I know it's not a 'big deal', just a little annoyance!

Hope you can help.

Thanks a million.

Pam

=-=

VM commented 7 July 2016 at 18:12

have you tested on a non mobile unit to determine if the issue is specific to mobile devices?

have you altered any of the bartik CSS? if yes, and this is a subtheme, have you tested bartik default?

if you've hacked the default CSS and you haven't generated a subtheme. Disable the theme in use. back it up. get a default bartik and test.

Have you tested other core themes?

Bartik on mobile device

dizzyone commented 13 July 2016 at 10:39

Hi VM

I thought I would work on this before I got back to you.

This is what I think what happened... I changed the Bartik theme to a responsive one (thinking I needed to do this to have it look good on my mobile), it was then that I checked the site on a mobile device. It all looked messy!

I have since gone back to my Bartik theme and tried it on my mobile... it looks ok. Not perfect, but ok. For the moment, I'll leave this matter. Once I have finished my site, I will ask for help ;)

Thanks VM for all your help.

Kind regards

Pam

Safari browser - still struggling, but...

dizzyone commented 31 July 2016 at 17:47

Hello there VM and Jeff,

I am still struggling with trying to centre in Safari browser and I am hoping (really hoping) that you can help me.

I did try the responsive Bartik, but it changed the look of my site, so I reverted back to my old site.

I don't know why it looks centered in Firefox and IE and not in Safari, but, I think I may have found something which may help you understand where I am going wrong.

When I put the mouse over the cog (hope that makes sense), I can see a dotted line which appears to go way beyond the screen.

In firebug, I can see the div#main-wrapper.clearfix is 1349x949.667. Could this be the problem? I don't know how to change this and just hope really that you can help me.

Thanks a million, once again.

Pam

Bartik uses margin: 0 auto

Jeff Burnz commented 7 July 2016 at 20:56

Bartik uses margin: 0 auto for centering, so what you are saying is that either iOS safari no longer renders CSS margin properties correctly (it does) or there is a bug in Bartik (which I can't replicate on iPad retina 3/4).

As VM alludes to above you will get more help if you provide more information yourself, screenshots, details of the iPad model, Safari version and so on - we cannot guess our way to the problem, because on a standard Drupal 7 install, with stock standard Bartik this bug is not evident.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Bartik on mobile

dizzyone commented 13 July 2016 at 10:49

Hi Jeff,

Apologies for the delay in replying. I wanted to work on this before getting back to you. I got myself into a right old mess. After trying to change themes (thinking this would look good on a mobile device - it didn't), I reverted back to Bartik and now it looks ok!!! Goodness knows what happened behind the scenes.

I now have a site which looks ok on my mobile, not perfect, but, ok. I don't know what went on, but thanks for trying to help.

I will contact the community further with screenshots, etc., once I have finished my site, in the hope that you can make it look better on a mobile device.

Thanks a milliion for helping.

Pam

Still Stuck with centering in Bartik Panels layout

dizzyone commented 4 August 2016 at 19:02

Hello Jeff

Sorry to bother you, I know you are always busy. I still cannot get my pages to centre in Safari web browser. The page always aligns to the left in Safari, but it is ok in Firefox and IE.

I have been 'on this' since the last time you replied! Feeling pretty useless!

I came across this coding and wondered if this had anything to do with it.

If it has nothing to do with it, then I will try looking elsewhere.

.panels-flexible-region {
padding: 0;
}

.panels-flexible-region-inside {
padding-right: 2em;
padding-left: 2em;
}

.panels-flexible-region-inside-first {
padding-left: 0;
}

.panels-flexible-region-inside-last {
padding-right: 0;
}

.panels-flexible-column {
padding: 0;
}

.panels-flexible-column-inside {
padding-right: 2em;
padding-left: 2em;
}

.panels-flexible-column-inside-first {
padding-left: 0;
}

.panels-flexible-column-inside-last {
padding-right: 0;
}

.panels-flexible-row {
padding: 0 0 0.5em 0;
margin: 0;
}

.panels-flexible-row-last {
padding-bottom: 0;
}

.panels-flexible-column-my_new_layout-main {
float: left;
width: 99.0000%;
}

.panels-flexible-my_new_layout-inside {
padding-right: 0px;
}

.panels-flexible-my_new_layout {
width: auto;
}

.panels-flexible-region-my_new_layout-userlogin {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-10-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-top_banner {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-9-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-mainmenu_to_go_here {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-7-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-banner {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-6-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-header {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-4-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-centre {
float: left;
width: 23.2690%;
}

.panels-flexible-region-my_new_layout-left {
float: left;
width: 52.6454%;
}

.panels-flexible-region-my_new_layout-right {
float: left;
width: 23.0856%;
}

.panels-flexible-row-my_new_layout-3-inside {
padding-right: 0px;
}

.panels-flexible-region-my_new_layout-center {
float: left;
width: 99.0000%;
}

.panels-flexible-row-my_new_layout-main-row-inside {
padding-right: 0px;
}

---------------------------------------

Hope you can help.

Thanks a million.

Kind regards

Pam

Link to the site/page in

Jeff Burnz commented 5 August 2016 at 01:07

Link to the site/page in question - everything is contextual to an extent, we need to see the actual site to determine why your site is not working as expected.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.