Headline Image Height of Screen

Site URL: https://www.yungrealestate.com/

How can I make the Headline Background Image responsive to the height of a mobile screen? I don't mind that the sides are cropped because I want the image to fill the screen rather than be minimized at the top so the width doesn't matter.

Hi. It looks like you solved this?

Do you want to make 2 buttons same height on tablet?

Sorry, now seeing your reply @tuanphan! I was not able to fix that but that's not a big issue.

Thank you for bringing this to my attention! Instead of making the two buttons the same height, I would prefer for them to stack one on top of the other as they do in mobile.

I also noticed that some Headers break on Tablet.

I would prefer for the Homepage specifically to switch to a Mobile format as soon as this happens as shown below to avoid any longer words in Headers breaking to a new line. This would also solve the issue with the text in the Contact Us button breaking to two lines. How would I be able to do that? How can I check the page width when the Header starts to break?

Thanks 😁!

On 3/24/2021 at 1:44 AM, tuanphan said:

Hi. It looks like you solved this?

Do you want to make 2 buttons same height on tablet?

Hi. Add to Design > Custom CSS

/* Tabet */
@media screen and (max-width:991px) and (min-width:768px) {
/* stack buttons */
div#block-yui_3_17_2_1_1615078591470_11964+.row .span-6 {
    width: 100%;
}
/* fix text break */
[data-section-id="6013174c6d75164ef6dcc5d6"] .content {
    width: 90% !important;
}
}

Thanks so much man. This worked perfectly! You are a legend.