Blocknote Picture horiz-centered and 2 columns not equal in lenght


#1

Hi,

My website jullo.nl/data1/

Problem 1)
The picture of my blockquote is aligned left and there is too much spacing between the image and the text. I would like to have the spacing less.

I tried custom css:

#blockquote .blockquote .container .bq-img col-md-6 col-sm-6 col-xs-6 wow fadeInLeft animated{
margin-left: 130px;
}

That didn’t work.

Suggestion:
I can see with Firebug that the picture is set to vertical-middle,
And perhaps i should have the same with horizontal axis?
So perhaps I have to add horizontal-middle to the blocknote picture?

How should I do something like that? Firebug doesn’t recognize the command
img {
horizontal-align: middle;
}
Custom CSS doesn’t recognize it either.

Problem 2)
I can see that there is a whole in the page… I created two columns 50%-50%.
First column contains a blocknote (img + text)
Seccond column contains two blocknotes (text only)

If I resize the (rescale) the image then a whole appears, either below the seccond or the first column.

The widgets don’t fill atomatically the whole collumn.


#2

Hello,

  1. :slight_smile:
    The first code isn’t valid so you can add whatever propriety you want to it but nothing will happen.

Horizontal-align doesn’t exist, and there is nothing to align there anyway since the full available space is already occupied.

You can use this to decrease the gap:


.bq-text {
   padding: 0;
}

And also add this if you want to decrease it further:


.bq-img {
   padding-right: 0;
}

  1. They do fill the whole column, but they fill it in width, not height. There is code that makes them have the same height, but it’s not well supported at the moment in various browsers and there’s no point in using it.

You can simply set your background color for the body to white and the hole won’t be visible.


#3

Thx for the explanation :slight_smile:

I tried to paste the custom CSS You suggested, but nothing happends. Not when I add:

.bq-text {
padding: 0;
}

or any other number behind padding.

Same when I try:

.bq-img {
padding-right: 0;
}

Sollution for Problem 2 is good :slight_smile: Thank You


#4

You did use it in a custom CSS plugin, right?


#5

Yes off course.

You still have acces to my website. See for yourself.


#6

I see it’s working fine. Are you not referring to the first image with the mirror?

I added the second code and I decreased it even more, but it was already decreased.


#7

Hi Vlad,

I refer to the image of the jolly lad with the mgnifying glas. and the tex right to the image. It i too far from each other.


#8

You probably have some caching issues.
Have a look:


#9

I have cleared all my cache, and its a little bit more tricky.
I opened the site with a different laptop and now I see what You see.
The thing is I am used to read on high resolution and small text. I zoom out in my firefox, to see more and sharper.

And then the theme strethes and big spaces apear between images and text.

As its not a design question anymore I would like to close the ticket and thank You for the assistence.