0

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.

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">
KyleMit
  • 30,350
  • 66
  • 462
  • 664
tydek
  • 31
  • 1
  • 2
  • can you provide some code for what you have already tried – KyleMit Aug 09 '13 at 13:22
  • of course

    Borut

    I am pixel-perfect...

     – tydek Aug 09 '13 at 13:24
  • 1
    Please put the code in your post! And don't forget to format it! (People tend to get mad at unformated code!) – BrainStone Aug 09 '13 at 13:26
  • @Borut, Welcome to StackOverflow. You'll get the best answers here by isolating single issues at a time by posting the least amount of code necessary to reproduce what you're having trouble with. Someone else should be able to easily run your code and suggest changes – KyleMit Aug 09 '13 at 13:30

1 Answers1

1

Look at the Skeleton Grid layout system

You have to declare the layout within a div of class container. Then add divs with the number of columns you'd like the to consume as classes. To place columns side by side, use classes alpha and omega.

<div class="container">
    <div class="twelve columns clearfix">
        <div class="six columns alpha">first block</div>
        <div class="six columns omega">second block</div>
    </div>
</div>

I added the following css to clarify the blocks

.alpha {
    background-color: red;
}
.omega {
    background-color: green;
}

This will render as follows:

enter image description here

See this fiddle to play around with the code a little

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • Thank you for your help KyleMit. But I have one question why clearfix, alpha and omega? Responsive is quite tricky for beginners. I add this code and it's working. (can't post an answer because I need reputation)
    – tydek Aug 09 '13 at 14:12
  • You need `clearfix` because the six column classes are nested within a twelve column class. Otherwise you don't need it. Same thing with `alpha` and `omega` for nesting to indicate left and right (respectively). See the code documentation for more info. Also, remember to accept answers that were helpful – KyleMit Aug 09 '13 at 14:20