Skip to main content

Forums

This topic contains 3 replies, has 3 voices, and was last updated by  snippet248 3 months, 4 weeks ago.

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

    brunoorocha
    Participant

    I’m working on a web project and one of requirements it’s that it must to be responsive. Until now everything it’s ok, but in high-fidelity prototype it have a section with a image with a long shadow that goes to the right margin of my screen and I really don’t know how I can make this resposive (without making CSS black magic). I would be very thankful if someone could give me a light about how I can make this trick haha.

    Bellow it’s the link to an image of how the layout must to be.
    https://drive.google.com/file/d/1tEVcqlIy9g-DVW7p-MKMe9uLyUanu0F1/view?usp=sharing

    #288381

    ludykraks
    Participant

    Would you mind sharing the link to the web page?

    Other than that if you want to make the image responsive, try:

    img {
    max-width: 100%;
    height: auto
    }

    #288382

    brunoorocha
    Participant

    I’m still in local development so I don’t have the link to share :(

    I worked on it earlier and I managed to make it work putting the img inside a div, this div occupies half of screen. So I set img with position: absolute and that’s it, the absolute positioning make image size not be affected by parent div size but the positioning yes because I didn’t set left/right properties.

    My problem is the long shadow, it’s like the image belongs to the normal alignment of my content, but the shadow exceeds my this alignment, this is why I’m using position: absolute. This make a lot easier to handle in smaller screens, but in larger don’t, unless my shadow were very very long.

    But I appreciate your tip, it would work very well if it were not for the long shadow! 👍🏻

    #288430

    snippet248
    Participant

    What about using a negative “spread radius” on the shadow?
    Example: box-shadow: 0px 0px 10px -30px rgba(0,0,0,0.5);

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