Skip to main content

Forums

This topic contains 3 replies, has 2 voices, and was last updated by  Connor Smith 5 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #281051

    Connor Smith
    Participant

    I have a linear gradient as a background colour as part of a header section on a website. However, when viewing on a smaller screen the gradient seems to be different in comparison to viewing it on a larger screen. The larger screen gradient is a lot darker.
    Wondering how I can resolve this.

    Small Screen:
    https://i.stack.imgur.com/FkS6T.png

    Larger Screen

    https://i.stack.imgur.com/TPEGt.png

    .gradient{
    background: linear-gradient(to right , #fe488c, #f99fd0);
    background: -moz-linear-gradient(to right , #fe488c, #f99fd0);
    background: -webkit-linear-gradient(to right , #fe488c, #f99fd0);
    }

    Thanks!

    #281052

    Paulie_D
    Moderator

    Based on the CSS alone this should not be the case.

    Can you demonstate the issue in Codepen.io.

    #281053

    Connor Smith
    Participant

    For some reason, no I cannot. It seems to be only on the browser. Tried it with Firefox and Safari and I get the same result as seen in the images above.

    Tried on codepen: https://codepen.io/smith8867/pen/zyagmK

    Any ideas why this is happening?

    #281054

    Connor Smith
    Participant

    Apologies! I seem to have resolved the issue. There was an overlay image that was semi-transparent on wide viewports. Apologies for the inconvenience.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star