On positioning HTML <picture> <source> element's

0
votes

I'm currently designing a website for university. I am using a 12 column layout for a responsive website and would like to know how to position an image lower down within said columns.

I am using a element and would like to move the y position of the

source srcset = "res/african.jpg" media = "(min-width:600px)"> element down.

surrounding this in div tags, targeting the individual columns and trying to position the actual picture element do not work as it either moves every column down or removes the image altogether.

               <div class = "col-2 col-s-4">
                    <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">
                    <source srcset = "res/african.jpg" media = "(min-width:600px)" // i would like to individually move down>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>
1
htmlimagecss-position

1 Answers

0
votes

Made separate picture element with new div> 

                <div class = "africantabletimage">  
                    <picture>
                        <source srcset = "res/african.jpg" media = "(min-width:600px)" >
                        <img src "">
                    </picture>
                <picture >

                    <source srcset = "res/scarf_900.jpg" media = "(min-width:768px)" alt = "Woman in scarf">

                    </div>
                    <source srcset = "res/girl_in_woods.jpeg" media = "(min-width:0px)">

                    <img src "">
                </picture>

            </div>

CSS

.africantablet image{
        padding-top:7%;
    }