[Resolved] Different image to the background for mobile using on Global Page Header

Home Forums Support [Resolved] Different image to the background for mobile using on Global Page Header

Home Forums Support Different image to the background for mobile using on Global Page Header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1163494
    Milos

    Hi there.
    I applied successfully a different image to the background for mobile using the simple CSS with your code from another thread by my Home page and my Über mich (About) page with Merged Site Header. Unfortunately I could not adapt this code for Global Page Header on my Blog page and so I can not use a different image for mobile there. Could you give me an advice please?

    By the background images for mobile I lost the origin color for Header Title H1 and H2 #71535c brown. How can I get them back?

    My website:

    Thanks.

    #1163504
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know πŸ™‚

    #1165591
    Milos

    Hi there,

    I already sent you a link to my website two days ago..

    #1165766
    Leo
    Staff
    Customer Support

    Sorry we don’t get a notification when a link is added. Please comment here again next time when it’s added πŸ™‚

    The CSS you are using should work for every page.

    How are you adding it?

    #1166057
    Milos

    I see..I will do that next time πŸ™‚

    I added in Elements/Global page header/Element Classes field “mobile-hero image” and then I copied your CSS code in Sites/Blog/Simple CSS metabox down with my image url inside:
    `@media (max-width: 768px) {
    .mobile-hero-image {
    background-image: url(‘full_url_to_the_mobile_image’) !important;
    }
    }

    #1166309
    Leo
    Staff
    Customer Support

    Instead of adding that CSS in the simple CSS metabox, try adding it in the global simple CSS editor in the dashboard so it will apply to every page.

    Let me know πŸ™‚

    #1166349
    Milos

    Yes that works. But I would like to use an another picture for the blog and I will lost the possibility to do that when I add that CSS in the global simple CSS instead in the simple CSS metabox..

    #1166391
    Leo
    Staff
    Customer Support

    Try this CSS in the global simple CSS editor (as the metabox doesn’t work on blog page):

    @media (max-width: 768px) {
        body.blog .page-hero.mobile-hero-image {
            background-image: url(https://BLOG-MOBILE-BACKGROUND-IMAGE;
        }
    }
    #1166447
    Milos

    After I completed your CSS code with close bracket behind the image URL it works fine πŸ™‚
    Thank you so much!

    I still have the problem with the title color by all mobile background images..as I wrote few days ago:By the background images for mobile I lost the origin color for Header Title H1 and H2 #71535c brown. How can I get them back?

    #1166527
    Leo
    Staff
    Customer Support

    I’m not seeing a topic for the other question.

    Can you open one if you haven’t already done so?

    I’ll mark this one as resolved.

    Thanks πŸ™‚

    #1166530
    Milos

    Thanks πŸ™‚

    #1166574
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.