Okay
  Public Ticket #2674609
How can I make background colour a gradient, for mobile only?
Closed

Comments

  •  1
    CoreyDesign started the conversation

    Hi there,

    For the second section, the .svg is too large to load on mobile in my opinion (2.4mb). 

    I want to make the background, a background gradient with these settings: background: linear-gradient(180deg, #00d2ff 0%, #3a47d5 100%);

    I have tried targeting the CSS selector copied from Google, I tried this other solution here: https://themenectar.ticksy.com/ticket/519005 

    None of it is working for me so far. 

    If you could provide me a fix, it would be much appreciated. I basically just want the background gradient to work for background colour, which will only show on mobile as the background image is disabled.

    EDIT: Login credentials are incorrect, oops.

    Thanks.

  •  8,848
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1px) and (max-width: 999px) {
        div[data-bg-mobile-hidden="true"] .row-bg.using-image {
            background-image: none!important;
            background: linear-gradient( 180deg , #00d2ff 0%, #3a47d5 100%) !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  1
    CoreyDesign replied

    Thank you! Worked like a charm.