Search code examples
cssalignment

Change div alignment if window is too small

I have a centered div in my homepage. When I make the window smaller the div goes out of both sides of the window. I want it to go out of the window on the left only. Is there any way to do this? I thought of changing the alignment if the window is too small.

Thanks in advance!

edit: I want to change it from this

<div style="margin: auto; width: 500px;"> centered div </div>

to something similar to this:

<div style="margin-left: 0px; width: 500px;"> not centered div </div>

when the window gets smaller than 500px to show the full-sized div.

Solution

  • You can use a media query

    div {
  margin: auto; 
  width: 500px;
}
@media (max-width:500px) {
   div {
     margin: auto 0px auto auto;
   }
}

    That will only apply your style once the width is less than 500px.