0

Okay, so I've been attempting to fix this bug on my personal website for a while now. I can't seem to find an answer that's specifically relating to my issue. It might be uncommon -- could be that I used a poor practice when making it.

I have three columns on a page. The HTML for these columns is as follows:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /*adds the card  */
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  overflow: hidden;

}

.column {
    float: left;
    width: 31%;
    font-size: 1em;
    font-family: 'Arvo', serif;
    text-align: center;
    position: relative;
    padding: 0 5px;
  }

.col-row {
  padding: 0 8em;
  margin: 0 -5px;
}

.col-row:after {
  content: "";
  display: table;
  clear: both;
}
<div class={"columns-container"}>
            <div class="col-row">
                <div class="column" id={"column-1"}>
                    <div class="card">
                        <h3>Title</h3>
                        <div class={"p-container"}>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                            </p>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        </p>
                        </div>
                        <h4 class="heading-details">Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                        <h4 class="heading-more-details">More Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
                <div class="column" id={"column-2"}>
                    <div class="card">
                        <h3>Title</h3>
                        <div class={"p-container"}>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                            </p>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        </p>
                        </div>
                        <h4 class="heading-details">Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                        <h4 class="heading-more-details">More Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
                <div class="column" id={"column-3"}>
                    <div class="card">
                        <h3>Title</h3>
                        <div class={"p-container"}>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                            </p>
                            <p>"Lorem ipsum dolor sit amet elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                        </p>
                        </div>
                        <h4 class="heading-details">Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                        <h4 class="heading-more-details">More Details:</h4>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
            </div>
        </div>

I don't really mind scraping the CSS I have for this. I just want to make it work. So, what's happening is the tag lines up. The text in the .p-container lines up perfectly. But, the tags (heading-details and heading-more-details) don't line up responsively. So, they'll align on a 15-inch laptop, but not at the half screen or on a 13-inch laptop. Usually, they're one or two lines off.

I'd especially like to get it so that it lines up regardless of how much text is in the p-container. That way it's easier to manage to add/remove text. Any help would be much appreciated!

jay_and
  • 1
  • 1
  • Please provide a working example using snippet button. – vanowm May 15 '21 at 01:01
  • Hi @jay_and, can you add the link to your website, or add a snippet so we can understand your issue and hopefully fix it. – First dev May 15 '21 at 02:25
  • You can use CSS animations (https://www.w3schools.com/css/css3_animations.asp). Put the animation you need inside a CSS class, and make a Javascript function that adds the class to the image you want to slide when it clicked, make sure the `position` is set to `absolute` so you can move it right and left. Here is an example (https://stackoverflow.com/questions/4847996/css-animation-onclick) – First dev May 15 '21 at 03:11
  • Okay, so I edited a code snippet someone added. It now looks like the issue I'm having on my website. I am using ReactJS, but for convenience's sake, just translated the code to pure HTML – jay_and May 15 '21 at 22:23

0 Answers0