Hello, I am trying to make a hero image with text at the bottom. So I have a section with a background image, and a row in the section with text that I want to be aligned in the center of the section, but at the bottom. I have tried to remove the padding and the margin, but so far I have had no luck. How would I go about doing this? Thanks!
Jon
Hi Jon,
Thank you for writing in, I see that you added a height:100vh to the Section. Please remove that and apply it to the ROW instead. Then also on the ROW apply the display: flex; and align-items: flex-end; property.
You can learn more about Flexbox CSS here.
Hope it helps,
Cheers!
While that worked, how I have to scroll down to see the text. Not sure how to fix that? I want the page to load and see the text in the row, not have to scroll down to see it.
Jon
Hi Jon,
That is because of the fixed height that you have set on the row which is 100vh. 100vh will set the row’s height to the height of the document but you will have to consider that there is a header above the row in question.
You will have to set a height to the row where it will be the height of the screen minus the height of the header.
This should be doable in jQuery. This might height you get started:
(function($){
var header_height = $('.masthead').height();
var window_height = $(window).height();
$('#the-row').css('height', window_height - header_height);
})(jQuery);
Please assign the ID the-row to the row for the code above to work.
You may check this link to understand better the code above:
Hope this help.
This worked - but another question.
If I want to do the same thing and apply it to two rows, how would I use the ID? For instance: I want to split the screen between two pictures - so I have two pictures in two different sections. I have the height set for 50vh in each, but I dont’ think I can use the same ID for both rows. Can i use “the-row” as a class and have it work? Or would it require something else in the JS?
Here is the link I’m currently working on: http://wp.holyangelssidney.com/start-here/
Thanks!
Hey There,
An element ID must be unique therefore you can only use the code once. If you want to apply it to a multiple rows, please use a custom element class instead. For example, you insert the-row in the class field, you will have to modify the code and use this one instead:
(function($){
var header_height = $('.masthead').height();
var window_height = $(window).height();
$('.the-row').css('height', window_height - header_height);
})(jQuery);
Hope this helps. Please let us know how it goes.
So I think I almost have it figured out. Now I have two views - one for mobile and one for desktop (I just have the hidden depending on the view). The desktop view I wanted a side by side, and for the mobile, a vertical one.
For the desktop view, I went with a single row and made two columns, removed the spacing, added the background images to the columns, and added the following code to try and center the text in the column vertically:
display: flex; flex-direction: column; justify-content: center;
I was also able to use the code to make it fit the screen on the row using the single row code above. All of that is working well! For the mobile view, I simply used the one I already had, and hid it for the two desktops.
However, the only problem with this is that the button spans the width of the column. I controlled this temporarily by modifying the margin for the button itself, but I’d prefer if the button was just large enough to fit the text and no more.
I’m sure there is a way to do it, just missing something. Thanks for the help with all this! I know its sort of bouncing around! Also, I’m not sure if what i did to hide the view is necessarily a “best practice” so if it isn’t, please let me know, just for the future.
Jon
Hi Jon,
That is because of the display: flex; added to the columns.
What you can do is set a max-width to the button elements then set the left and right margin to auto.
That should be okay as that is the suggested way to do it based on the feature available in X.
Hope this helps.
Awesome, I will try it out. Thanks so much for walking me through this!
Jon
You’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.