Hello I am having little problem with responsive design. I don't know how to add image on the left and text on the right.
I am working with Skeleton.
What should I do ?
Update: Some Code
<section id="about">
<div class="container">
<div class="container">
<div class="one_half ">
<img class="picture-me" src="images/me.png" alt="">
<!-- PICTURE SHOULD BE ON THE LEFT -->
</div>
</div>
<div class="one_half last">
<h2 class="name"> Borut</h2>
<p>I am pixel-perfect...</p>
<img class="shadow" src="images/shadow.png" alt="" width="537" height="1">
<img class="quote-right" src="images/quote-right.png" alt="" width="29" height="21">
<img class="quote-left" src="images/quote-left.png" alt="" width="29" height="21">
Look at the
Skeleton Grid
layout systemYou have to declare the layout within a
div
of classcontainer
. Then add divs with the number of columns you'd like the to consume as classes. To place columns side by side, use classesalpha
andomega
.I added the following css to clarify the blocks
This will render as follows:
See this fiddle to play around with the code a little