This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Apply background image in header and switch to logo image for mobile

  • Creator
    Topic
  • #7449
    marijen
    Participant

    Hello good morning!

    I was wondering if it’s possible to place a background image to the Arcadian template. Our main reason for purchasing this template is its functionality on mobile devices and I would not like to compromise that by placing an image that causes conflicts. The only thing is that now on PC the logo size that suits the iPhone perfectly looks too small and out of place. I would therefore like to use a large background image, be able to disable that to work on mobile devices and keep the space for the logo. Is all of that possible? If the disabling part is too customized, please let me know

    http://www.ishairdesign.es

    Tx!

    Marije

Viewing 3 replies - 16 through 18 (of 18 total)
  • Author
    Replies
  • #7690
    marijen
    Participant

    Tx Jason, it worked!

    #7732
    marijen
    Participant

    Hello Jason,

    Ok, now: back to where we started with: to show a different style when opening the site on a mobile device. In the panel I set the theme option to call on a different style on mobile devices.
    Then I went to the responsive.css as you indicated above and added this to the child theme>assets>responsive.css sheet at the bottom:

    .header_logo {
    background-color: #848484;…;
    height: …;
    }
    .header_logo .tb-image-logo {
    display: none;
    }
    @media (max-width: 480px) {
    .header_logo {
    background-image: none;
    height: auto;
    }
    .header_logo .tb-image-logo {
    display: inline;
    }
    }

    Would I have done it correctly?

    #7757
    Jason Bobich
    Keymaster

    You shouldn’t ever be editing any themes files at all. In the beginning i suggested you view this file as a reference to learn how the theme targets different viewports. All custom CSS should go in your child theme’s custom.css file

Viewing 3 replies - 16 through 18 (of 18 total)
  • The forum ‘The Arcadian Responsive WordPress Theme’ is closed to new topics and replies.