Replace a page title with an image on just one page - Harris Template

Well, it would need to be wide enough to fit all the letters in. But yes, as tall as the longhorn picture is in the mobile view.

Is it possible to use one image in mobile view and a different image in desktop view? Because I could make a different image for mobile view that would make it easier to fit all the letters in while cropping the sides of the image to make it taller

@ediblewalls

/* All devices */
/* Hide Page Title */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title span {
    visibility: hidden;
}
/* Insert New Image */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title {
    background-image: url(https://images.squarespace-cdn.com/content/v1/5d26197…/1564…q3JJthZTcucY-Z3n09bwP_S9f_xILyS3loG5KTnpdHvwWR-dhpQ/Parker.jpg?format=300w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100px;
    width: 100px;
}

/* Mobile */
@media screen and (max-width:640px) {
/* Replace with NEW MOBILE IMAGE URL */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title {
    background-image: url(mobile-image-url) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100px;
    width: 100px;
}
}

Thank you for working so hard on this!

That code actually made the image on the desktop view smaller. Pretty darn small actually

@ediblewalls Line 16-27 is new, the rest is old (Old is the code that I sent yesterday)

Just add line 16 - 27, NO NEED to add 01-15

Gotcha....

Now I am getting this

In case this helps, this is the code on there now

/* Hide Page Title / body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title span { visibility: hidden; } / Insert New Image /body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix { background-image: url(https://images.squarespace-cdn.com/content/v1/5d261974e3281d0001fef5b5/1564831094548-6U0PW5EUU3XLOGF1IKPY/ke17ZwdGBToddI8pDm48kC2Ou1MO9kamcKms_rlnXOx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0pTKqSDRwmMK43IUI3HojJWvxET3ZsoHLF25q9M0jMXigr6IB5A8OQ1JN_TuoaZPoQ/Grey+background+flag+image+and+tex+3.jpg?format=2500w); background-repeat: no-repeat; background-size: cover; background-position: center center; max-width: 100vw !important; height: 30vw; } / Remove top bottom space / body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix { margin-top: 0; margin-bottom: 0; } / Mobile / @media screen and (max-width:640px) { / Replace with NEW MOBILE IMAGE URL */ body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title { background-image: url(https://images.squarespace-cdn.com/content/v1/5d261974e3281d0001fef5b5/1564840007477-GPWIATQH0P4LSZRMUUXZ/ke17ZwdGBToddI8pDm48kJUlZr2Ql5GtSKWrQpjur5t7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UfNdxJhjhuaNor070w_QAc94zjGLGXCa1tSmDVMXf8RUVhMJRmnnhuU1v2M8fLFyJw/MOBILE+Grey+background+flag+image+and+tex.jpg?format=1500w) !important; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100px; width: 100px; } }

Sorry, replace Line 19: body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title

with

body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix

@ediblewalls replace Line 19 (in my code), or Line 12 (code you just posted): body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title

with

body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix

Okay, great. Now I just have the one image, but it is pretty small

@ediblewalls Clear your browser cache

Still small

Okay, I messed with the size a little.

I think it is great on mobile now!

Once again, thank you so very much!

@ediblewalls You're welcome.