Text positioning difficulty [adjacent images padding margins not working]

Tagged: , , ,

Author Posts

helenryle March 13, 2016 at 6:36 pm

Hello support,
I’m pretty new to wordpress and am finding difficulty with positioning of text on my blog in two places. I can’t manage to change the positioning with Microthemer (newest version) and would be grateful if you would have a look and advise me please?

I’m writing the blog about a current health challenge and building it behind a coming soon page at http://www.rectalcancerblog.com, I can send you details of the two positioning issues and the login details if you will let me know how to contact you privately?
Many thanks,
Best wishes from Ireland,
Helen

Sebastian March 13, 2016 at 7:01 pm

Hi Helen,

I’m happy to take a look at your issue. Please send login details via this secure contact form: https://themeover.com/support/contact/

Thanks!
Sebastian

Sebastian March 15, 2016 at 12:09 pm

Thanks for sending me access Helen. You wrote:

The two difficulties I’m finding are:
1. On the homepage I can’t get the text to move further down from the base of the image to leave a gap of whitespace.

When I highlight the text section with microthemer it seems to indicate that the top part of the text section is also covering part of the image. I presume this is something to do with css positioning but nothing I’ve tried so far has made any difference.

2. On the single blog posts I’d like to move the text sections closer, this is a post representative of the problem http://rectalcancerblog.com/surgery-date-confirmed/. If you scroll down you’ll see a big gaps just above the section with the reflexology image and a smaller gap but still bigger than a paragraph gap below it.

I tried adjusting top/bottom padding and margins in the theme’s page builder rows and elements settings first, then with microthemer but can’t seem to narrow the gaps.

In answer to your questions:

1. You need to set top padding on the paragraph that currently has clear:both applied to it.

Add top padding

Inspection of your site (Right-click > Inspect) revealed that the first paragraph with text has the necessary float clearing setting to push it down after the image. It now needs a value for top padding of say 20px. You could do this via your page builder perhaps? Or maybe use your page builder to add a custom id to the paragraph and then target it with Microthemer.

2a. The very big gap is caused by an empty paragraph.

Empty paragraph

The empty paragraph element depicted above was probably created accidentally by hitting return while working inside your page builder. You should be able to remove it by editing the content block in your page builder and deleting any empty space.

2b. The smaller gaps are caused by inline padding added by your page builder.

Inline padding

It looks like your page builder adds 10 pixels of padding to all content blocks by default. These are added an inline styles which Microthemer cannot override (due to CSS source order specificity rules). Can you remove this padding via your page builder/turn off this automatic padding globally?

Cheers,
Sebastian

helenryle March 18, 2016 at 11:22 am

Hi again Sebastian,
Many thanks for your kind assistance. I’ve solved the issue of getting the text further down below the image in 1. but seem to have inadvertently made another issue – now all the paragraphs seem too far apart, this is occurring on the home page and all the blog posts so I must have done something that
is affecting paragraphs spacing site-wide. Sorry to be a pain but can I possibly ask you to have another look at this for me?

Regarding 2a, I’ve rectified that, thanks.
Regarding 2b, I now see that as you thought, the pagebuilder adds 10px padding to every row by default, before you start with adding elements into the rows. So I reduced the top and bottom padding to 0px in the rows and the page now looks a bit better.

Again, many thanks for your help, it’s much appreciated.
Kind regards,
Helen

Sebastian March 21, 2016 at 6:20 pm

Hi Helen,

I’ve just checked your home page and blog pages. I see that paragraphs are separated by just one line. Did you manage to solve this one yourself over the weekend?

Cheers,
Sebastian

helenryle March 23, 2016 at 12:53 pm

Hi Sebastian,
Yes, I’ve managed to get the paragraph spacing back to normal now. I removed all the microthemer css I’d added and started from scratch and it’s gone better this time – I guess I just need plenty of practice and lots of patience!
Many thanks for your assistance,
Kind regards, Helen

You must login or register to reply to this topic.