Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 10, 2018 at 3:02 pm #954594
    steviger

    Hi guys,

    I’m looking for a solution to make an image “float/overlapping” a color section, both top and bottom. Please see the desired lay out in the screenshot. The green color section with the rounded image.
    The top part is easy: z-index:99; margin-top:-50px; position: relative; But I don’t know how to fix the bottom part.

    Screenshot: https://imgur.com/a/2UjnfCT

    Thanks in advance!

    Regards,

    Steven

    May 11, 2018 at 9:36 am #955113
    Victoria

    Hey steviger,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    May 11, 2018 at 10:30 am #955151
    steviger

    Sure, see private content.

    May 11, 2018 at 12:16 pm #955215
    Mike

    Hi,
    I moved the image outside the green color section and made the green color section 250px high, then added a custom class and aligned the image to the right and moved it up with this css in the General Styling > Quick CSS field:

    .image-one {
    margin-top: -33% !important; 
}

    2018-05-11_061305
    Try adjusting in for tablets and hiding the image for mobile, or moving it down.

    Best regards,
    Mike

    May 11, 2018 at 12:29 pm #955228
    steviger

    Hi Mike,

    Of course, that’s it! Thanks!

    May 11, 2018 at 6:15 pm #955386
    Jordan Shannon

    Hi,

    I’m glad you got this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘[SOLVED]Image overlapping color section’ is closed to new replies.