WordPress.org

1. Henkeman0
   Member
   Posted 5 months ago #

   Hi everyone!

   I'm trying to get the Calendar view of Events Manager to get centered on a page using the TwentyEleven-theme.

   I have a child theme setup but I really need some help with the correct css code in styles.css file.

   This is how it looks now: http://fitnesskompaniet.se/boka-grupptraning

   As you can see the calendar is way to far to the right and it looks awful.
   I want the page title and text to be where they are, but the table with the calendar needs to be centered to fit in better.

   If anyone could help me with this I would be forever grateful!

2. agelonwl
   Member
   Posted 5 months ago #

   hi,

   please try this

   table.em-calendar {
      padding..
      margin... or margin: 0 auto;
   }

3. Henkeman0
   Member
   Posted 5 months ago #

   Hi agelonwl,

   Thank you for your suggestion!

   I tried all of them and inserted them in style.css of my child-theme, that is correct, right? (I'm a little bit of newbie to this...) but that did not change anything on the page. :/

   What I think I need to change is the padding of the whole page (but only on this specific page, id=32) Because the calendar is so big and because it starts to far in from the left where the tile text also starts it does not matter if I change the margin of the calendar.. It's still pushed in from the left by the page.

4. Henkeman0
   Member
   Posted 5 months ago #

   Hi again.. I think I've found a way.. almost.

   I have added this code:
   

   .singular #content, .left-sidebar.singular #content {
       margin: 0 -12%; <--- Changed to -12
       position: relative;
       width: auto;
   }

   and that made the page look better and the whole calender fits the page, however, I don't want this to affect all the other pages I have. Just this specific page.

   So.. Is there a way to make this code just work on a specific page id?

5. Henkeman0
   Member
   Posted 5 months ago #

   .page-id-32 .singular #content, .left-sidebar.singular #content {
       margin: 0 -12%;
       position: relative;
       width: auto;
   }

   did not work.. :(

   ..help!

6. Henkeman0
   Member
   Posted 5 months ago #

   Ok.. So now I have messed around a bit and I have decided to make the change effect all my pages. I mean, why not use all the space =)

   But I did not use the code above, instead I found this (via FireBug extension in Firefox) and changed width: 67% to 100%:

   .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
       margin: 0 auto;
       width: 100%;
   }

   And also to make the space above the title move up a bit to look more in conjunction with the wider page:
   

   .singular.page .hentry {
       padding: 0.5em 0 0;
   }

   Now I'm satisfied with the look!

Reply

You must log in to post.