Title image and text issue

  • studiorepublik

    (@studiorepublik)


    3 years, 6 months ago

    Hello. I have been trying to resolve the title image which isn’t scaling on mobile devices. I’ve learned that the title image is not the issue but the text that the developer laid on top. I have checked in CSS but don’t know where to locate and fix the issue. The page title “The Arena” is currently not scaling on mobile, the title image underneath it is.

    .qodef-title-holder .qodef-title-inner{
    background: rgba(0, 0, 0, 0.7);
    }

    .qodef-iwt-icon{
    width: 100px;
    margin: auto;
    }
    .custom-title-class{
    background: url(http://studio-republik.com/wp-content/uploads/2019/07/the-arena-logo-white.png) no-repeat;
    background-size: 400px;
    background-position: left;
    height: 200px;
    }
    .qodef-title-holder .qodef-title-wrapper .qodef-page-title{
    display: none;
    }
    .arena-icon img{
    width: 80px;
    height: 80px;
    }

    .qodef-info-box-holder .qodef-ib-front-holder .qodef-ib-title{
    text-shadow: 1px 1px 1px #000;
    }
    .qodef-iwt .qodef-iwt-title {
    font-size: 20px;
    }

    .qodef-info-box-holder {
    min-height: 180px;
    }
    .banner-form{
    position: absolute;
    top: -500px;
    right: 0;
    box-shadow: 0 0 20px 10px #0199bf;
    }

    .qodef-title-holder.qodef-bg-parallax{
    z-index: 0;
    }
    @media (max-width: 479px) and (min-width: 320px){
    .banner-form{
    position: relative;
    top: 0;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • mark l chaves

    (@mlchaves)

    3 years, 6 months ago

    Hello @studiorepublik,

    Can you please try this custom CSS?

    
@media screen and (max-width: 767.998px) { 
  .custom-title-class {
        background-size: 15rem; /* Adjust as needed. */
  }
}

    This media query will resize your logo image overlay for small devices (anything smaller than 178px wide).

    Thanks!

    • This reply was modified 3 years, 6 months ago by mark l chaves. Reason: Added missing closing right paren
    Thread Starter studiorepublik

    (@studiorepublik)

    3 years, 6 months ago

    Hi Mark, thanks so much for your help, the code has worked perfectly. Wish there was a button to buy people like you a coffee for your help! Thanks again.

    mark l chaves

    (@mlchaves)

    3 years, 6 months ago

    Hi @studiorepublik,

    Great! Glad to know that it worked for you.

    You might have noticed that I had a typo in the last sentence in my reply. It should say

    “smaller than 768px wide”

    instead.

    About the coffee, it’s the thought that counts. 🙂

    Cheers!

    mark

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Title image and text issue’ is closed to new replies.