Alignment – Left and Right Side

  • arjunbolangdy

    (@arjunbolangdy)


    10 years, 3 months ago

    Hello!

    I am facing an alignment problem when I try and remove an image off one of the pages on my website. If you open the page here:

    I want to remove the block that says ‘Worker Bee, $10 a month’ but when I take it off, the other three (Coffee Cruncher, Sweet Supporter, Community Connector) move to the left so there’s a large blank white space left on the right of these three.

    I want the blank space to be spread evenly between the left and right side of all three. Please help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Johnna Armstrong

    (@johnna-armstrong)

    10 years, 3 months ago

    Have you tried adding padding to the left and right of these classes in your stylesheet?

    .paypal2-donate
    .paypal3-donate
    .paypal4-donate

    I think that will do the trick.

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    10 years, 3 months ago

    It then adds them in a vertical line which then has the bottom two blocks overlapping with the rest of the content on the screen.

    Without the padding though, it aligns to the left rather than the center – I need it to align to the center.

    Johnna Armstrong

    (@johnna-armstrong)

    10 years, 3 months ago

    What if you set the width of each of the remaining divs to 33% and set the text-align to center?

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    10 years, 2 months ago

    But how would you do this code wise?

    Alignment is something I have been struggling with on WordPress for quite a while now.

    Johnna Armstrong

    (@johnna-armstrong)

    10 years, 2 months ago

    After you remove the 1st div, update the CSS for the 2nd div in your stylesheet from this:

    .donate2-paypal {
    display: block;
    width: 255px;
    height: 460px;
    float: left;
}

    to this:

    .donate2-paypal {
    display: block;
    width: 33.3333%;
    height: 460px;
    float: left;
    text-align: center;
}

    Update the 3rd and 4th divs the same way. Hope it works for you!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Alignment – Left and Right Side’ is closed to new replies.