Scale Title across desktop and mobile views

Travelify
1

Hello – I am hoping to have my Title scale on the travel blog (mikemcewan.ca) I am creating. Currently, it displays as I would like in the desktop view:

However, in tablet or mobile views the title overlaps the header image:

Anyone have an idea on how I could remedy this? Thank you in advance,

2

Hi @mikemcewan,

Thank you for your another question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options


@media only screen and (max-width: 950px) {
	img.header-image {
    padding-top: 10%;
    background-color: #E8F7FC;
}
}

Best Regards,
Movin

3

Thank you @movin. Was I supposed to remove any of the code you previously provided to have title sit on top of the header image:

header#branding {
    position: relative;
}
#branding > .container {
    position: absolute;
    top: 0;
    left: 20px;
    width: 100%;
}

Simply adding the new code you provided appears to have no effect.

4

The cod eis not working on your site because of the following custom CSS code that you have added in the style.css file of your child theme. The code doesn’t have closing bracket.

@media only screen and (min-width: 767px){

The code should be as following.

@media only screen and (min-width: 767px){
}

Whenever you find the CSS code i have provided doesn’t work on your site then try adding it at the very top of CSS code.

5

Thank you @movin! I ended up adding two instances of the same code with different max-width’s. The code you provided worked well in tablet view, but the text was still overlapping the header image in phone view.

6

You are most welcome here :slight_smile: