Results 1 to 2 of 2

Thread: Single column site with image wrapped text alternating. Please help!

  1. #1
    Junior Member
    Join Date
    Apr 2016
    Posts
    3

    Single column site with image wrapped text alternating. Please help!

    I suddenly found myself needing to complete a project ASAP without the Bootstrap developer. I'm trying to have sections of copy wrap around a single pic with the first paragraph & pic on one side and the next ones the opposite. I thought it would be easy but I'm not thinking responsively. Thank you for helping!

    Note: I didn't include anything that's working. It's the page content that is doing screwy things (because I did!)


    HTML:

    <div class="container">
    <h1>the first H1 string of text</h1>
    <img src="images/1.jpg" class="img-right .img-fluid" alt="1st pic">
    <p>This is the copy for the first paragraph with an image to the right of it with a max width of 325 pixels. The rest of the page content will typically have text to one side and an acompanying image to the other. Sometime it will be two or three with the pics on the same side. It seems that at 768 and smaller, the pic should be on its own line. Otherwise, the wrapped copy looks bad with single words down the left. Above 768, this code appears to work alright, but I know it's not right.</p>
    <ul>
    <li>First point to be made</li>
    <li>Second point to be made</li>
    <li>Third point to be made</li>
    </ul>
    </div>

    <div class="container">
    <h2>the first H2 string of text... a little smaller as a subheading</h2>
    <img src="images/2.jpg" class="img-left .img-fluid" alt="2nd pic"
    <ul>
    <li>These bullets are to be to the left this time</li>
    <li>The pic is to be to the right</li>
    <li>I found that something strange happens without "<p></p>" inserted above these line's <ul> tag.</li>
    <li>I have no idea why though</li>
    </ul>
    </div>

    <div class="container">
    <h1>This is another header</h1>
    <div class="card img-right" style="width: 25rem;">
    <img class="card-img-top" src="images/3.jpg" alt="pic 3">
    <div class="card-body">
    <div class="card-text">
    <ul>
    <li>I used a card in hopes of easily adding a caption to the image</li>
    <li>Thank you very much for looking at this and helping me!</li>
    </ul>
    </div>
    </div>
    </div>

    -----------------------------------------
    CSS:

    @charset "utf-8";
    .content {
    max-width: 1440px;
    margin: auto;
    background-color: #FFFFFF;
    }
    p {
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    }
    h1 {
    font-size: 1.7em;
    font-weight: bold;
    color: #716946;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-align: center;
    }
    h2 {
    font-size: 1.4em;
    font-weight: bold;
    color: #716946;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    }
    .img-right {
    float: right;
    margin-left: 1.5rem;
    box-shadow: 2px 2px 5px 0px #454545;
    -webkit-box-shadow: 2px 2px 5px 0px #454545;
    margin-bottom: 1rem;
    margin-right: 1.5rem;

    }
    ul {
    margin-top: -15px;
    padding-top: 0px;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 7.rem;
    }
    .img-left {
    float: left;
    margin-left: 1.5rem;
    -webkit-box-shadow: 2px 2px 5px 0px #454545;
    box-shadow: 2px 2px 5px 0px #454545;
    margin-bottom: 0px;
    margin-right: 4rem;
    }
    .card-body ul {
    margin-left: -30px;
    margin-top: -15px;
    margin-right: -20px;
    margin-bottom: -5px;
    }
    Last edited by Fitz2016; 03-27-2019 at 12:55 PM.

  2. #2
    Member
    Join Date
    Mar 2018
    Location
    United States
    Posts
    72
    If you have some problems with HTML coding I can recommend to get help from HTML5 tutor, they are excellence in every technical task. I often used their help when I was a beginner. Now I studying JavaScript and soon will start my first project!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •