alignment of pictures is gradual for no reason

  • Resolved boxestim

    (@boxestim)


    7 years, 3 months ago

    Hi all,

    I got a problem. I am creating a new landing-page for my website (www.noroadback.com), I ‘hide’ it as I am still working on it at https://www.noroadback.com/test/. If you go there you’ll see that the clickable images that link to articles are not aligned straight but go down gradually. I cannot figure out how to get the alignment horizontally straight.

    I made the images in HTML as A href’s with a background-image. I use the CSS below.

    Can someone point me at what I am doing wrong? Can someone also help me with the black lines that are underneath the images that disappear when you hover over them?

    Many thanks!!!

    ———-

    h2.linedtitles {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    }

    h2.linedtitles span {
    background: #fff;
    padding: 10px;
    }

    .recentpostscontainer {
    border: none;
    heigth: 180px;
    }

    #postcusco {
    border: none;
    position: relative;
    float:left;
    width: 320px;
    height: 180px;
    max-width: 30%;
    color: white;
    margin-right: 5%;
    background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Cusco-incawomen.jpg”);
    background-size: contain;
    background-repeat: no-repeat;
    }

    #postmachupicchu {
    border: none;
    float: left;
    width: 320px;
    height: 180px;
    max-width: 30%;
    color: white;
    margin-right: 5%;
    background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Machu-Picchu-1.jpg”);
    background-size: contain;
    background-repeat: no-repeat;
    }

    #postsalkantay {
    border: none;
    float: left;
    width: 320px;
    height: 180px;
    padding-top: 10% ;
    padding-left: 1%;
    max-width: 30%;
    color: white;
    background-image: url(“https://www.noroadback.com/wp-content/uploads/2017/08/Day2-8.jpg”);
    background-size: contain;
    background-repeat: no-repeat;
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    You have a line break between each of the images, so they will go down on the page.

    https://pix.toile-libre.org/?img=1503612340.png

    remove the line breaks and use CSS that treats them as a grid.

    Thread Starter boxestim

    (@boxestim)

    Hi Steven,

    Thank you for your help. The problem is fixed. I think it was caused by the visual editor (but the break does not show in the normal editor). I have installed the Tiny MCE Advanced plugin but am contemplating de-activating is since I feel it is (partly) responsible for a whole lot of bugs. Do you have any experience with that?

    Thanks,

    Thijn

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘alignment of pictures is gradual for no reason’ is closed to new replies.