Centre area containing my page content
-
A big hello to the forums!
I am wondering if anyone can offer advice on how to move (re-position) the white area on my website pages. At the moment, it’s slightly off-centre. I want to move the whole lot slightly to the left, so it sits in the centre. Have tried using #main #page and #primary classes, but they seem to move only the page content without taking the white background. Hope this is not a dumb question. Greatly appreciate any help.
My website its: http://www.tasmanianstoryboardgroup.com. Hopefully, you’ll see what I mean.
cheers StuartThe blog I need help with is: (visible only to logged in users)
-
I have now resolved this issue, off my own bat. Starting to get a handle on CSS after all.
Don’t need any further help.
cheers
Stuart -
-
Hi Stuart, on Writr theme, “center”, as far as the content goes is somewhat relative. If you go to the Writr Demo Site and then narrow and widen your browser window, you will see that the area to the right of the content gets narrower and the content stays static down to about 960px in browser window width. We can center it at any point, but if someone comes to your site with a wider or narrower monitor/browser window setting, it will not appear centered.
If you do the same window narrowing on your site, and narrow it down quite a ways, you will see that some of the elements on your site start to become obscured and/or are partially outside of the browser window (page title on your main page). We can adjust all of that so that that doesn’t happen, but is what you are wanting is for the content to be centered within the area between the left menu/sidebar area and the right edge of the browser window?
-
Stuart, that’s great. If you wish, take a look at your site while narrowing your site down to smart phone size and see if you want to make adjustments to some of the CSS so that things don’t get obscured and let me know.
-
Hi Sacred Path,
I actually managed to fix my problem about 20 minutes ago. Found the following CSS at a WordPress.org discussion group./* Grid */
#page {
width: 1120px;
}
#page:before {
width: 720px;
}/* Primary */
.content-area {
width: 720px;
}/* Content */
.entry-thumbnail {
width: 720px;
}/* Media */
.entry-attachment .attachment {
width: 720px;
}
.video-wrapper .video-player {
max-width: 640px;
}
After that, it was just a matter of tweaking some of the positioning for page titles and captions etc.
All-fixed.
Many thanks for your interest.
cheers
Stuart -
Despite my self-help site fix, I took your advice and checked out its Smartphone look and Tablet look by clicking on the CSS Editor options on my laptop. It looks terrible in those two modes. Do I have to write a whole new CSS?
-
No, I’m pretty sure we can accomplish what you want with just some adjustments to your CSS. Let me take a look at things and I’ll get back to you.
-
That would be great! I just checked out my website on iPhone and a friend’s iPad. It’s all over the shop in those two modes. Makes no sense at all. Look forward to hearing your advice Sacred Path.
kind regards
Stuart -
Stuart, I’m working on this now for you and will post the modification here as soon as I get it all working across devices.
-
You are very generous with your time Sacred Path.
I have reviewed my Mobile preferences (under Appearance) and made sure they are all switched on. I notice that my site looks a little better in Mobile format now that I have the WordPress app for iOS, but it’s still pretty terrible.
No idea idea how to fix the Tablet format. -
Stuart, since you are using a responsive design theme, there is no reason to activate the mobile theme as responsive themes adjust for smaller screens and devices. I would suggest disabling the mobile theme at Appearance > Mobile. If you want to see what it would look like before you disable it, go to your site on your mobile and then down at the bottom tap on view full site.
The Mobile theme (Appearance > Mobile) was developed for use on sites with fixed width themes.
-
If you wish to stay with the Mobile (Appearance > Mobile) I would suggest deselecting “Include this CSS in the Mobile Theme” at Appearance > Customize > CSS. That way the mobile sites should look good and work well on mobile devices although it will not look like your main site does.
-
Ahh! I see. I wondered about the meaning of “Responsive”. I’ll give it a go and get back to you. Many thanks.
-
OK, that appears to have worked!
I have deselected “Include this CSS in the Mobile Theme at Appearance > Customize > CSS” and also disabled ”the mobile theme at Appearance > Mobile”. Site looks much better on my Mobile if you do both.
I don’t have access to a Tablet at the moment but will be seeing someone with an iPad later in the day. However, it should be fine, now that the “responsive” nature of the site is activated.
Great help Sacred Path. Thanks so much. Keep spreading the CSS Happiness! -
Hooray, and you are welcome, and do let us know if there are any issues and we would be happy to help sort those out for you.
-
I have checked out the site on a friend’s iPad. It looks fine if you hold the iPad horizontally (like a laptop or desktop), but is all awry if you hold the device vertically (like a book). I’m not sure that can be fixed because I’ve heard that many ‘responsive’ themes don’t adjust for Tablets and iPads. I would be interested to know what you think/or would advise.
Laptop/Desktop and Mobile modes are all working fine. -
Responsive themes should work fine on tablets in portrait and landscape orientation, and all of ours here do, in their un-modifed form. There are a number of CSS changes you have made that are causing the issue. I’m working on fixing that for you, but it is taking a while to sort out all the things we need to compensate for.
- The topic ‘Centre area containing my page content’ is closed to new replies.
WordPress.com Forums 