Hey guys,

I'm not sure if it's ok to post these kinds of help requests here. If it's not, mods, feel free to delete it.

Anyway, I need a little help with my blog.

Well, first, this is my blog's address. I've been using it for a long time as my personal portfolio.

http://www.rafaelmorgan.net/

As you can see, I use a custom template, responsive. So far so good.

The problem is that the body of individual posts is too misaligned.

Check out this post, for example:

http://www.rafaelmorgan.net/2012/09/damnation-cup.html

As you can see, everything is cluttered on the left, and, most importantly, the text width stretches way beyond the width of the image itself.

Now, straight to the point. I need to find a way to bring everything to the center, justifying the text in relation to the posted image.

I've attached an image to illustrate what I'm trying to do to do, which is bring everything to the yellow area.

If I was using a regular template, I'm sure it would be easy to make some changes, but since it's a custom template, full of complicated code, I can't figure out what to do.

I don't know anything about coding, but I know how to copy/paste and change some stuff here and there, you know...So, could anyone help me to figure out what I need to do to the code to achieve this desired result?

Thank you in advance,

R.

 

Are these designs yours?
I love the chairity, the Psycho Plunger and the little time

Unfortunately I cant help you.

 

Is your blog hosted at blogger.com? The template you're using is not really well-coded (at least not the post pages). Blogger is not really a professional blogging CMS, it's known to have a few bugs and problems that sometimes make it really frustrating to use. So if you're planning to keep this website growing in the future, I'd highly recommend you to switch over to Wordpress.

The reason your text on the post page is exceeding the featured images width is that your post page code is really messed up, e.g. almost every line of text has its own <div> element containing the text. All those divs are then encapsulated within a post container that seems to have no specified width. And HTML semantic elements with no set width will automatically be as wide as the screen they're displayed on.

 

Hello, right now I checked your blog.
Well, I must inform you about this. I don't know who make this, but every link for detail page has slightly different div structure.
Per example:
Mirror/Mirror is presented fine, but Damnation cup is not!
You should check how links are opened, and does the every link has own html or php file.
Structure must be the same in every detail page. If you have some detail page with expected structure, then div placement must be the same in all others.
Per example:

<div class="postbodycontent">
<br>
<a href..... style="float:left;etc...">
</div>

This structure must be the same in all files.
Well, your blog is for sure static (with static content) so you don't use database, but it can be maked different, so ever time you open detail it use the same detail html file.

 

Also, I recommend you to use Bootstrap for this kind of stuff.
You can just add two columns in container, or one column with offset (in center) and then play with your content. Big thing with Bootstrap is in resizing from big to small screens.

 

Also, you have some script errors on page (6 errors).
... anyway, you should check one link with well formatted images and text and then apply that div style to all other details. And you must not forget div classes and styles, it's important. If some div hasn't some class name it will not work properly

 

Thank you, mate. Yes, this is my work. I'm glad you liked it!

Oh, and thanks to whoever dropped me a note via contact form. Now I've managed to align image and text to center, which is great! I tried to get back to you via email, but it was immediately returned.

Like some of you have observed, posts are currently very messy. I'm reviewing them one by one, but the hardest part is done.

Anyway, there are just a couple of more things that I'd like to adjust.

I need to align the name of the project and width of the divider. I've attached an image to illustrate what I mean.

I tried to figure what should I change to achieve these results via Chrome's "inspect element", but failed miserably.

Anyway, yes, for now my website is hosted on Blogger. I know it's a very outdated and amateur platform, and I am indeed planning to change it.

Learning proper webdesign is currently the first thing on my to-do list, so, hopefully, I'll be able to design my own site from scratch in the near future. Damn it...So many cool things to learn...So little time.

All the best,

Rafael.

 

Last edited: Oct 19, 2015

This is a custom Blogger template that I've found on the web. I use Blogger's own HTML/CSS editor to edit things.

As for my coding knowledge, it's literally close to zero. I can deduce part of the logic behind it, since part of it is reasonably self-explanatory, so I can change some lines and values here and there, but it's a kind of hit and miss game, if you know what I mean.

Man, I feel so outdated...I need to learn these things asap.

 

Dude get wordpress...

honestly...

 

Editing Blogger themes is probably not the best way to get into web design. Blogger has a lot of unique semantic HTML elements and quite a lot of Javascript included that no other CMS uses, which makes the whole coding experience seem a lot more complicated than it actually is.

If you want to learn webdesign efficiently, you might want to take a look at udemy.com. They have quite a few free webdesign tutorials, and currently all their pay-to-watch courses are 10$ only

 

For

<h1 class="post_item_title">

set style:

• display: block;
• max-width: 640px;
• margin-left: auto;
• margin-right: auto;
• width: 53%; // this is optional, I must set to 53 to get title aligned correctly. Normal value should be 50%

For <a href> inside title set style:

• text-align: left;
• padding-left: 0px;

(if you want to have title centred, you don't need to add these to a href)

And you will get expected result!

 

Last edited: Oct 20, 2015