0

I'm having a problem moving a panel slightly of the page like that:

enter image description here

I tried width: 120%

it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4

Pls help, thank you

Mikail G.
  • 3
  • 2

2 Answers2

0

Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.

Check this out based on device size.

/* For devices smaller than 400px: */
body {
  left-margin: 100%;
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    left-margin: 50%;
  }
}

Take a look at W3's Informative Series on responsive web design. https://www.w3schools.com/css/css_rwd_intro.asp

Dharman
  • 30,962
  • 25
  • 85
  • 135
BikeLinc
  • 46
  • 4
0

Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.

If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.

CIB
  • 535
  • 1
  • 12
  • 35