Problem with css positioning of images

  • Hey, this might be a stupid problem but it has been driving me nuts. I have small various images I need to place in a lot of different spots on different pages. It seems that fixed positioning is the best option for me but to get the images to move correctly with the other elements when the screen is resized, I am needing to place them in the same grouping…

    The problem is..everything looks great as far as the placement but it is leaving a large gap under the header (aka where the image had to be placed in editor. From my research, it seems the only way to get the placement to work with the group is ‘position: relative’ and I think that is what is leaving the teacup size gap under the header. Please help!!

    Here is the current code I have…

    header .teacup-home {
    position: relative;
    }
    
    .teacup-home {
    position: fixed;
    top: -110px;
    left: -220px;
    z-index: -1;
    }

    The blog I need help with is: (visible only to logged in users)

  • Hi there!

    It looks like the space is coming from top: -110px that pushed the teacup upwards, leaving that space behind.

    You can add the following code to make up for it.

    .home div.wp-site-blocks > header {
        margin-bottom: -110px;
    }

    Also, since you have the WordPress.com Premium plan, did you know that you could access our live chat and email support to receive help faster? The WordPress.com Premium plan gives you live chat support Monday-Friday, and during the weekends, you’ll get email support.

    You can see how to access live chat and email support here: https://wordpress.com/support/live-chat/#how-to-access-live-chat-support

    I highly recommend reaching out to us that way to make use of your plan’s higher tier support. :)

  • Thank you so much! I wasnt sure if there was another way to place the images without it affecting the layout of the site like it is but for now I will just make up the gaps as needed.

    And thank you I did not know about the chat. Great info!

  • You’re welcome! Glad I could help!

  • The topic ‘Problem with css positioning of images’ is closed to new replies.