[Theme: Twenty Eleven] How to arrange picture on the right side of page

  • Hi,

    I’m working on this blog https://blogs.sonia.de/spinatbunker/ and put the picture with the arrows in the index.php and arranged it with the stylesheet.

    I worked at a 27″ Monitor and everything seemed to be alright. Then I opened the blog on a laptop and the picture moved into the wrapper. The same happens when I change the size of the browser window.

    Is there a way to put the picture behind and at the right side of the mainwrapper and let it stay there, no matter which resolution or size the browser windows has?

    Greets
    Kabeljau

Viewing 1 replies (of 1 total)

  • Hey Kabeljau!

    There’s a few different options, if you want the arrows resized at different resolutions, the best way would be to take advantage of media queries in your css, or dynamically size the image, using percentages rather than pixels.

    The other way would just be to remove the margin from the right (for the div you’ve created), you can also change the z-index (which is like the layering system of css) to make sure it isn’t breaking through your content area.

    It would look a little something like this:

    #pfeile {
margin-right: 0px;
margin-top: -1240px;
overflow: hidden;
height: 1500px;
float: right;
}

    The second float you have in there for bottom can be removed (it isn’t supported). If it was there to try to keep the arrows from coming to an end, that shouldn’t be a problem (the image itself is quite large), but you could also add this to your css:

    #pfeile img {
min-height: 100%;
}

    That will make sure it’s covering all of the space ??

    Hope that helps!

Viewing 1 replies (of 1 total)
  • The topic ‘[Theme: Twenty Eleven] How to arrange picture on the right side of page’ is closed to new replies.