[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

Help with Wordpress CSS -- please!

Hi-- I am using a weird theme in Wordpress, but it's too late to turn back now.

All of my content is lining up too far to the left and I don't really understand CSS. I made some alterations to the theme and now everything is messed up!

You can see the content is lined up wrong on posts or pages, which both use the same layout:

http://www.syked.com/sample-page   (page)
http://www.syked.com/test-post.html (post)

Thank you so much. I really need the help!

Mellanie

0
mellijae
Asked:
mellijae
1 Solution
 
Jason C. LevineNo oneCommented:
It's going to be a lot of fidgeting with inline styles but the basic issue is there is no margin or padding on anything so all elements are starting right from the edge.

So look for this div:

<div style="width:900px; padding:0; margin:0 auto; display:block; clear:both; overflow:hidden;" class="builder-module-outer-wrapper builder-module-content-outer-wrapper">

and change the padding so it looks like this:

<div style="width:900px; padding:0 10px; margin:0 auto; display:block; clear:both; overflow:hidden;" class="builder-module-outer-wrapper builder-module-content-outer-wrapper">

That 10 pixels of left and right padding will help bring the text into line but now you'll be having to go up and down the CSS tree making a similar change to other instances of that inline style and there are a LOT of those instances.

Something else to play with are the widths.  Everything is 900 pixels but your background appears to not be quite that wide.  Depending on the effect you are going for you may want to tighten that up.

As observed in your other question, this is really, really poor design that you are being forced into manipulating...

0
 
LouSch7Commented:
A more straight forward approach would be to modify the CSS and specific style that is already being applied to the contents DIV tag.

Locate the following file: www.syked.com/wp-content/themes/Builder/style.css
Go to line 403 which should have the following: .builder-module-content .builder-module-element {
Within this element add padding-left:25px;
I have attached code which reflects what this block of styling should look like.
.builder-module-content .builder-module-element {
   margin: 1.5em;
   display: block;
   text-align: left;
   overflow: hidden;
   padding-left: 25px;
}

Open in new window

0
 
user_nCommented:
On the http://www.syked.com/sample-page
the content is in div with class post-content. Try to put the content on the other site in a div from the same class.
0
 
mellijaeAuthor Commented:
Thank you so much for taking the time to write such a detailed answer. I really appreciate it and you are helping me in my own learning process. Thank you!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now