Home > OS >  how do I stak these picture vertically on small screen?
how do I stak these picture vertically on small screen?

Time:02-06

Blockquote I'm trying to stack these picture vertically on a small screen.so one column instead of two

I'm trying to stack these picture vertically on a small screen.so one column instead of two

enter image description here

here is my code`

<div >
      <div >
        <div >
          <div >
            <img
              
              src="project-images/skylit.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img
              
              src="project-images/skit4.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
        <div ></div>
        <div >
          <div >
            <img
              
              src="project-images/skit6.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img
              
              src="project-images/skylit2.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img
              
              src="project-images/lvr.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
        <div >
          <div >
            <img
              
              src="project-images/gym.jpg"
              alt=""
            />
            <div >
              <a  href="#">link here</a>
            </div>
          </div>
        </div>
      </div>
    </div>`

I'm trying to stack these picture vertically on a small screen.so one column instead of two here is what I have tried so far

CodePudding user response:

If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.

https://getbootstrap.com/docs/4.0/layout/grid/

Start from smallest class too:

  • Related