Docs

[MacMartino]

Hi, at my testsite: http://www.financeplus.bpr.nu i just installed a new X theme and started to work on the layout.
And questions arise :)…
1)
Now, I have two ‘boxes’ that I made with 2 columns, that have a border around it.
I want ONE column with an image, that should fill the whole column – but should not stretch out of proportions (X,Y). In the other column the text. Pretty much like at the site. So I checked all kinds off answers @the forum,
as this can’t be done with the standard setting (I get a white border beneath the image).

Now I found something like (see the second ‘box’ with the computer):
>
display:inline-block; vertical-align:middle; height:100%; width:100%; background-size:cover;
>
To put in the style box (it’s a pity the field for style is so small! please fix this in an update)
This almost does the job, but the proportions are not kept when resizing.
Can you tell me how this can be done?

2)
Also, if I use mbn, mtn in the class field of a section/row/column or whatever, it doesn’t work. So I add margin: 0px; all over the place 🙁

Please help me with this, since I plan to use this in another site too.

[MacMartino]

This reply has been marked as private.

[MacMartino]

Also; just tried to install the x-child, but it says ‘there’s no main theme’ and I should install ‘x’…?
Any ideas how this can be?

[Joao]

Hi There,

I would add this as you did on your columns if you are doing just on this columns, otherwise you can add a class (for ex: yourclass) to your columns on the class box just above the style box and go to Appereance > Customizer > Custom > CSS

and add :

.x-column .yourclass {
display:inline-block; vertical-align:middle; height:100%; width:100%; background-size:cover;
}

2- Let us know what elements you would like to remove the margin and you can do it across all the site via Customizer > Custom > CSS as well

3- Try accessing your website via FTP and installing the Child Theme Manually in wp-content/themes/x-child

Hope that helps

Joao

[MacMartino]

2) So I should add the .yourclass, and then I can use ‘your class’ in the class-field of a column?

And any idea on how to keep the right aspect ratio of the image? Because now, it resizes by stretching the image or pushing it.

2) For instance: in the lowest part theres a Form at the left, and a ‘Contact; text at the right. Now I have to add a GAP above the form, as I cannot get the ‘Contact text’ to start higher (like where now the GAP starts)… I cannot find where to remove the space above ‘Contact’.

3) I’ll try that this afternoon, as I have to check my FTP details 😉

[MacMartino]

O, and can you tell me where to de-activate the little (+) corner in the upper right at the menubar? I don’t know What it is en where to deactivate it (or where to add content to it 😉

[Friech]

Hi There,

#1 Yes, declare the class (.yourclass) on Customizer > Custom > CSS. And then apply that class on your columns class field.

Would you mind pointing us where is this image you’re referring to? Is the image is a background or an image element?

#2 The headline is hard-coded, you need to apply the class directly on the h5 tag.

<h5 class="mtn"><span style="color: #4ba6e8;">Contact<br></span></h5>

#3 Let us know how it goes.

#4 That is the Header Widget Areas, you can disable it on Customizer under Header panel. Customizer is in Appearance > Customize.

Content of it can be added/edited on Appearance > Widgets. Look for the Header 1 to Header 4, depends on how many Header Widget Areas you set on Customizer.

Hope it helps, Cheers!

[MacMartino]

Ok, back to the original question (see original post): how do I prevent the images from being distorted (aspect ratio x/y) I mean, see attached. The images look like crap when I resize, they get stretched or compressed.
It can be seen live (financeplus.bpr.nu)

[Nabeel A]

Hi again,

This line of CSS height: 100%; is stretching the image when the screen is re-sized. Since your image has a low resolution it cannot be displayed the way you need without stretching the image. You can display it as a background image instead.

Hope this helps!

[MacMartino]

Actually, when i added that line the aspect ratio stays intact. But it only works with lores-pictures. If i add for instance a 600 x 400 image, it only displays a part of it. Is there any way to use a better qulaity image, yet that it shows the whole image and not just a part of it?

[Rue Nel]

Hello There,

Thanks for the updates!

To have a better understanding of how the background images works whether it is used in a section or column, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this may help you.

[MacMartino]

Oh, for the child theme: ftp did not work. I had to delete theme x and the child theme and then re-install theme x and child theme (but now x-child instead of x-child-5 or so). And then it worked.
Before, i Exported all Theme X data.
I found out, that widget info isn’t exported and had to be put in again.

[Rahul]

Glad to hear that it is now working.

Let us know if we can help with anything else.

Thank you.

[Author]

Posts