Columns width and image position

[Pardi]

I would like the first column to occupy +/- 30% and the second column 70%. I would like the image in the first column to be centered vertically and horizontally, occupying the available width. More or less like this:

However when I view the page in the browser each column occupies 50%, the image appears on the left.

What adjustments should I make to achieve 30% / 70% in column width and have the image appear centered?

Thanks, best regards.

[ruenel]

Hello Gabriel,

Thanks for writing in! Please make sure that your column widths applies to most of the large screens. You can check out this screenshot below.

Click on the “Template” word in the panel to launch the Responsive Styling.

If you are not familiar with the responsive styling, please check out this documentation first:

• https://theme.co/docs/responsive-styling

If the above is not help, please provide us the URL of the page where we can find the above layout so that we can inspect it.

Best Regards.

[Pardi]

Hello Rue,

Thanks for your help, I was able to do as indicated.

Now another problem came up that I don’t know how to solve. I am working on my PC (Wamp), I cannot share the URL.

When I place 1 column for small screens, the image overlaps with the previous section or the text with the next section. I have tried all the vertical settings and none of them worked. Please see:
https://screencast-o-matic.com/watch/c3eqbEVFmve

I would also like to remove the white space above and below the image: how can I do this?

Thanks, best regards

[ruenel]

Hello Gabriel,

Did you add any negative top margins to the image or your column? By the way, use the “Stretch” in your flexbox setting. Since you are working locally, please save the page as a template and then export the template through the Template Manager. You can then use Dropbox and share it to us so that we can import your template in our local testing server and be able to help you figure out and resolve your issue immediately.

Thank you in advance.

[Pardi]

Hello Rue,

Thanks for your help, I couldn’t fix it. This is the Drop Box link:
https://www.dropbox.com/s/qzhxgpkmeu63uck/sobre-mi.tco?dl=0

Best regards,

[tristup]

Hi Gabriel,

I have imported the template and checked in my local environment and found that the space above and the below of the image is due to the other column height. In a Row the columns are in equal height and it takes the highest one in that case. What I suggest here is to set the Flexbox > Vertical alignment to center for the smaller screens to adjust the image within that height.

Hope it helps.
Thanks

[Pardi]

Hello Tristup,

I did what you said and it didn’t work.

I placed a very short text in the second column and the vertical size of the first column is still large and has the blanks.

On the other hand I don’t understand why the second column is placed below the next section.

Thank you, best regards

[Pardi]

Hello,

I started the section again (from scratch) and now everything is fine. I guess something was corrupted in the one I deleted.

Greetings,

[tristup]

Hi Gabriel,

Glad to know that it is resolved now.

Thanks