Make image move off page a little on different sized screens

[logoglo]

Hi there, see here:

Official Website of Andrew Kirsch

Please scroll down to about andrew.

So, what I want is, if the screen width reduces now, it make the image in the 1st column shrink…is there a way of doing this:

Make the image move to the left, off screen slightly (ie the right column pushing it left) and not shrinking?

At the minute it looks like this when the width reduces:

So as it is on a full screen:

Then on a smaller screen:

I hope I explained ok.

Thanks.

[ruenel]

Hello @logoglo,

Thanks for writing in!

To better assist you with this issue, please check out this video series:

• https://www.youtube.com/playlist?list=PLWPh_GoP7hYU_bsFHaG4CvIhWiafNS1f5

Best Regards.

[logoglo]

Thanks, though I didn’t really find it helped with my issue…if I use it as a background, the text will go over the background image if the text goes to the left…what I want it to do, is push the image to the left, and slightly off screen as the text moves to the left on smaller screens…so I would have a row with 2 columns, and on smaller screens have the left column width less than the right…but if I do that now, the image shrinks…I need it to be pushed left by the right column, if that makes sense.

[ruenel]

Hello @logoglo,

If that is the case, you can utilize the Responsive Styling and apply a negative left margin to the Image element on a specific screens size.

Kindly let us know how it goes.

[logoglo]

I mght not be explaining myself properly…I need as the screen gets smaller, to push the image to the left, if I add a neg margin it still shrinks…

I need it to look like this, if the screen shrinks, and the right column moves to the left…:

[christian]

Hey @logoglo,

Apologies for the confusion.

There are several steps you need to do.

1. Wrap your Image element in Div element because the Div element can be positioned. Set the Position to Absolute and the Left value to a negative number like shown below. You can adjust the value per screen size. (see https://youtu.be/JCJkQazeRQU)
   
2. Set the Image element’s Width to a fixed (px) value like shown below. This is so that the image won’t follow the width of the column because you’ll need to resize the column in the succeeding steps. You can adjust the value per screen size. (see https://youtu.be/JCJkQazeRQU)
   
3. Adjust the Column sizing in your Row element settings. You can learn how to do that in this video: https://youtu.be/1jgsgvtdyn8
   
   

Hope that helps.

[logoglo]

Nearly there for sure, that’s making the image not shrink, which is what I needed.

But, I need the right column to push the image left, off screen as the width of the screen reduces. I know I can set the left margin to neg for other break points, but on the laptop, and large breakpoint, I need wiggle room, I need it so between 1200px and 1500px + , whenever the right column moves left, the image does too…

Right now, the text and right column, move over the left image:

Thanks for your help so far.

[logoglo]

I have given the div a class and added this, its kinda working how I want it too, if you have any better suggestions, I am all ears:

@media only screen and (max-width: 1500px) and (min-width: 1200px){
    .andrew-div{
left: calc(100vw - 1500px)!important;
    }
}

Thanks!

[marc_a]

Hey @logoglo,

We’re glad that you’re able to find a solution to your issue.

Cheers!