Full width image height + wide

[thebushmistake]

I am probably going to regret this question (or not), but I just got the Pro theme, and all I want to know, is the basics, to make a image, fill out 100%, a section both in wide and (in height proportionally.)

What seems like a basic thing to do, eludes, and I’ve read many other threads, but nobody gives a clear answer.

Is it only possible with like custom CSS?

/Caspar

[Joao]

Hi Caspar.

So, usually to do that you would use a background image, the reason is that, screens differ from width height proportions, if you use an image element instead of a background image, it is impossible to have it to cover your full screen on a desktop monitor and on your mobile table at the same time, as the proportions are quite the opposite, one has landscape proportions while the other has portrait proportions.

Have your mind that your image will be slightly or not so slightly cropped on different devices when using a background image, but the fact is that if you force any image to be 100% height 100% width on every device the results wouldn’t not be good, and that does not depend on the theme.

That said, alternatively, you can create different sections for mobiles and for desktops, each section on the Pro builder offers a customize tab with the options of hiding based on screen width. But let´s suppose you don’t want to do that for now.

To achieve what you are looking for, create a section on Pro Builder and add a background image.

Click on the customize tab of the section and on the Inline CSS box you will add:

min-height: 100vh;

Let us know how it goes,

Thanks

[thebushmistake]

Thank you for your answer. I have come some way, based on it, and I understand, I need to learn a lot more about how the pro theme works.

I now have a section with inline CSS: min-height: 100vh;

And in this section I have a column/row, and a headline. I want the column/row, including its content the header, to drop to the bottom of the page. Would that also be done by CSS, and for the row or for the colmun? If you can give me any pointers, I’m would be happy.

I am trying to build a front page in the mold of https://www.nytimes.com/2017/11/27/travel/nicaragua-dario-poet.html

[Joao]

Hi Caspar,

You could use a classic gap element above the content, or use CSS.

Please provide your URL so we can provide you a tailored solution.

Thanks

[thebushmistake]

Thank you for your kind help.

The URL is https://huginmunin.camp/exploration/ and I am looking to create a bottom within the section, where the column/headline sticks to, or has it origin (in the bottom of the section with the background picture). And I would also like to add this gradient effect to the transparent background, as seen on https://www.theguardian.com/film/2017/oct/14/tom-hanks-movies-didnt-make-sense-or-money-interview-short-stories

Any pointers would be appreciated.

[christopher]

Hi there,

If you want to add a button you can use the button element. You will need to assign a CSS Class to that button by clicking on the Customize tab of the button element and add a class such as bottomaligned.

Then you need to add the CSS code to X > Launch > Options > CSS and set the button position to be absolute and bottom 0:

.bottomaligned {
 position: absolute;
bottom: 0;
}

You may need to also add a class to the section you added for example bottomalignedparent and set the position of it relative:

.bottomalignedparent {position: relative;}

Please kindly consider that these are considered as customization requests and are cases that not available out of the box in our theme. We will do our best to help you around to get you started with the code but the actual implementation is on your shoulders.

I strongly suggest that you start with these:

https://www.w3schools.com/css/

Thank you for your understanding.