I have a row in my page and I want the space in between the borders of the boxes along with keeping the boxes the same size on rotate. The animation is what I want it’s that they squares are turning into rectangles and also I don’t seem to know how to make them look as stand alone squares with the borders?
.statementnews { border-style: solid; border-width: 1px; padding-left:2em; /* width: 3vw; */ /* height: 3vh; */ /* justify-content: space-between; */ /* margin-right: 1em; */ transition: width 2s, height 2s, background-color 2s, transform 2s; } .statementnews p { text-align: wrap; margin-left:1em; margin-right:1em; background-color: #F0F0F0; } .statementnews:hover { width: 1em; height: 1em; transform: rotate(360deg); } .mycolumn2 { /* display: table-cell; */ margin-top: 2em; /* width:100%; */ text-align: wrap; } .mycolumn2 div { width:100%; display: table-cell; padding-top: 1em; width: 25vw; height: 3vh; justify-content: space-between; }<section class="row sectionthird"> <h1 class="mycolumn_header">What they’ve said</h1> <div class="mycolumn2" id="content2"> <div class="statementnews" id="content2"> <img src="https://i.imgur.com/19iZKat.png" alt=""> <p>“Manage has supercharged our team’s workflow. The ability to maintain visibility on larger milestones at all times keeps everyone motivated.”</p> <p>~Anisha Li</p> </div> <div class="statementnews" id="content2"> <img src="https://i.imgur.com/nywqgF7.png" alt=""> <p> “We have been able to cancel so many other subscriptions since using Manage. There is no more cross-channel confusion and everyone is much more focused.”</p> <p>~Ali Bravo</p> </div> <div class="statementnews" id="content2"> <img src="https://i.imgur.com/TAe4vVN.png" alt=""> <p>“Manage allows us to provide structure and process. It keeps us organized and focused. I can’t stop recommending them to everyone I talk to!”</p> <p>~Richard Watts</p> </div> <div class="statementnews" id="content2"> <img src="https://i.imgur.com/dnBxz07.png" alt=""> <p>“Their software allows us to track, manage and collaborate on our projects from anywhere. It keeps the whole team in-sync without being intrusive.”</p> <p>~Shanai Gough</p> </div> </div> </section>
This is the modified code which would give you the desired output:
html
<section class="row sectionthird"> <h1 class="mycolumn_header">What they’ve said</h1> <div class="mycolumn2 " id="content2"> <div class="statementnews col"> <img src="https://i.imgur.com/19iZKat.png" alt=""> <p>“Manage has supercharged our team’s workflow. The ability to maintain visibility on larger milestones at all times keeps everyone motivated.”</p> <p>~Anisha Li</p> </div> <div class="statementnews col"> <img src="https://i.imgur.com/nywqgF7.png" alt=""> <p> “We have been able to cancel so many other subscriptions since using Manage. There is no more cross-channel confusion and everyone is much more focused.”</p> <p>~Ali Bravo</p> </div> <div class="statementnews col"> <img src="https://i.imgur.com/TAe4vVN.png" alt=""> <p>“Manage allows us to provide structure and process. It keeps us organized and focused. I can’t stop recommending them to everyone I talk to!”</p> <p>~Richard Watts</p> </div> <div class="statementnews col"> <img src="https://i.imgur.com/dnBxz07.png" alt=""> <p>“Their software allows us to track, manage and collaborate on our projects from anywhere. It keeps the whole team in-sync without being intrusive.”</p> <p>~Shanai Gough</p> </div> </div> </section> and add this to your css
.col { min-width:25vw; } Also, there was one error. The id of all the div of statement news were the same. In HTML, ids can’t be the same. So I have removed the ids out of divs if you wish to add them, give them different naming(content1, content, content3 and so on).
Please note that the cards had the same id’s. I’ve changed the CSS a bit hopefully this is what you meant
.statementnews { width: 300px; height: 300px; padding-left: 30px; box-shadow: 0 0 10px; border-radius: 10px; margin: 10px; overflow: auto; transition: width 2s, height 2s, background-color 2s, transform 2s; } .statementnews p { text-align: wrap; margin-left: 1em; margin-right: 1em; background-color: #f0f0f0; } .statementnews:hover { transform: rotate(360deg); } .mycolumn2 { width: 100%; margin-top: 2em; display: flex; flex-direction: row; justify-content: center; text-align: wrap; } <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=" /> <title></title> </head> <body> <section class="row sectionthird"> <h1 class="mycolumn_header">What they’ve said</h1> <div class="mycolumn2" id="content2"> <div class="statementnews" id="content_1"> <img src="https://i.imgur.com/19iZKat.png" alt="" /> <p> “Manage has supercharged our team’s workflow. The ability to maintain visibility on larger milestones at all times keeps everyone motivated.” </p> <p>~Anisha Li</p> </div> <div class="statementnews" id="content_2"> <img src="https://i.imgur.com/nywqgF7.png" alt="" /> <p> “We have been able to cancel so many other subscriptions since using Manage. There is no more cross-channel confusion and everyone is much more focused.” </p> <p>~Ali Bravo</p> </div> <div class="statementnews" id="content_3"> <img src="https://i.imgur.com/TAe4vVN.png" alt="" /> <p> “Manage allows us to provide structure and process. It keeps us organized and focused. I can’t stop recommending them to everyone I talk to!” </p> <p>~Richard Watts</p> </div> <div class="statementnews" id="content_4"> <img src="https://i.imgur.com/dnBxz07.png" alt="" /> <p> “Their software allows us to track, manage and collaborate on our projects from anywhere. It keeps the whole team in-sync without being intrusive.” </p> <p>~Shanai Gough</p> </div> </div> </section> </body> </html> </body> </html>