WordPress.com

1. markjagdev
   Member
   Apr 18, 2012, 2:21 AM

   Hi guys,

   All my text that I write in the text editor appears right to the edge of the left margin on all pages. See this example: http://evolutionarycities.com/services/

   Is there some css code that can help indent all text so it sits slightly to the right of the left edge of the dimmed back panel?

   Thanks for all your help in advance.
   mark
   Blog url: http://evolutionarycities.wordpress.com/

2. kardotim
   Happiness Engineer
   Apr 18, 2012, 11:02 AM

   Please try to add this CSS code into your CSS editor.

   p, fieldset, table {
   margin-bottom: 15px;
   margin-left: 10px;
   }
   
   div.sharedaddy, #content div.sharedaddy, #main div.sharedaddy {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 12px;
   clear: both;
   margin-left: 10px;
   }
   .wf-active h3 {
   font-size: 16px;
   margin-left: 10px;
   }

3. markjagdev
   Member
   Apr 20, 2012, 1:32 AM

   Thanks Kardotim,

   I just got the time to try out your guidance. It has worked but their are a few challenges. If you look at this page: http://evolutionarycities.com/about/

   .. you will see that the prezi is also slightly to the left which is something I don't want, the right side of the prezi now overflows off the shadowed/opaque background. I need css code that will only indent the text including the numbers and bullet points.

   The numbers, on the page I link to above, and bullet points i.e. at the bottom of this page: http://evolutionarycities.com/cities-of-the-future/ --> don't get indented.

   Please help! :)

   Thank You.
   mark

4. kardotim
   Happiness Engineer
   Apr 20, 2012, 8:42 AM

   The CSS code below should center your prezi slider a bit.
   

   iframe {
   z-index: 0;
   margin-left: -7px;
   }

   And use this part to fix your bullet points.

   .post-content ul li {
   background: url(images/bullet.jpg) top left no-repeat;
   padding: 0 0 0 15px;
   margin-left: 10px;
   }

   As you can see I added margin-left to increase or decrease the margin position. Feel free to adjust this number to change the position.

5. markjagdev
   Member
   Apr 20, 2012, 10:30 AM

   Hi Kardotim,

   Using your code the prezi here: http://evolutionarycities.com/about/
   --> is still no change and indented by the same amount as the body text - even when I change the -7px to -1 or even down to 0px

   The numbered text now indents to the left but only for headings i.e. see the headings here: http://evolutionarycities.com/services/ as opposed to the numbers in the body text at the bottom of the page here: http://evolutionarycities.com/about/

   The bullet points now don't show up at all.. see here for the last two sentences that are meant to be bullet pointed: http://evolutionarycities.com/cities-of-the-future/

   Can you re-write the code for what you have suggested so far so I don't keep adding amended versions of code on top of what you have already given me? I can then just replace what you have given me with something that works, is that possible?

6. macmanx
   Happiness Engineer
   Apr 20, 2012, 7:56 PM

   Instead of the whole ".iframe" section above, try just this:

   iframe {
       margin-left: -7px;
   }

   Instead of the whole ".post-content ul li" section above, try just this:

   .post-content ul {
       margin-left: 10px;
   }

   and:

   .post-content ol {
       margin-left: 10px;
   }

   Adjust the px amount as necessary.

7. markjagdev
   Member
   Apr 20, 2012, 10:40 PM

   Everything seemingly works good now except... the numbers on the about page are replaced with bullet points and they need to be indented see here: http://evolutionarycities.com/about/

8. macmanx
   Happiness Engineer
   Apr 20, 2012, 11:01 PM

   They're still numbers, but the numbers themselves are hanging over the content edge, leaving just the decimals behind.

   Try increasing the margin-left on .post-content ol to 25px.

Topic Closed

This topic has been closed to new replies.