Ecommerce Shopify WordPress Discussion

Text thrown out of div's boundaries in wordpress

The goal I wanted to achieve was creating offer container by hand to list full description with price of some item on a wordpress page. I decided to write my own script which displays "show more" button when text exceeds some length and afterwards, while it's clicked on an item rolls down itself so it makes all sentences visible. Nonetheless, I noticed some snag on scaling to mobile view cause container threw out content outside, even though content has got property set as overflow: hidden so it should be fixed to container anytime I think. Got some observations on casual html file with the same mechanics written by me and the behaviour is totally normal contrary to wordpress elementor page creator. Here I post some code with the screenshots along. CODE SNIPPET /* Checking if read more button is needed */ window.addEventListener('DOMContentLoaded', countLines, false); function countLines() { var offers = document.getElementsByClassName('offer-text'); for (var i = 0; i < offers.length; i++) { displayOrNotButton(i); } function displayOrNotButton(i) { var showMoreContainer = document.getElementsByClassName('show-more-container')[i]; if (offers[i].offsetHeight < offers[i].scrollHeight) { // your element has an overflow // show read more button return; } else { // your element doesn't have overflow showMoreContainer.style.display = "none"; } } } /* End of checking out */ document.addEventListener("DOMContentLoaded", function () { /* It's for rolling down items and backwards*/ var showMoreContainers = document.getElementsByClassName("show-more-container"); var offerContainers = document.getElementsByClassName("offer-container"); var checkboxes = []; for (var i = 0; i < showMoreContainers.length; i++) { (function (i) { checkboxes[i] = showMoreContainers[i].getElementsByTagName("input")[0]; checkboxes[i].addEventListener('change', e => { showOrHideText(e.target.checked, i); }) })(i); } function showOrHideText(checked, i) { if (checked) { offerContainers[i].style["max-height"] = "none"; } else { offerContainers[i].style["max-height"] = "450px"; } } }) /* End of rolling mechanics */ :root { font-family: Arial, Helvetica, sans-serif; } #all-offers-section { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 5em; } .offer-container { position: relative; display: flex; flex-direction: column; align-items: center; width: 300px; max-height: 450px; padding: 2em 2em 100px 2em; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5); } .offer-text { margin: 10px; height: auto; overflow: hidden; } .offer-price-tag { position: absolute; left: 0px; bottom: 25px; width: 100%; text-align: center; } /* reserved for show more button */ .show-more-container { position: absolute; bottom: 4.5em; display: flex; text-align: center; } #all-offers-section label { position: relative; font-weight: bold; font-size: 1.125em; margin-top: 10px; text-decoration: underline; } div.show-more-container > input { display: none; } label:after { content: "Show more"; } input[type="checkbox"]:checked + label:after { content: "Show less"; } @media screen and (max-width: 640px) { #all-offers-section { grid-template-columns: 1fr; } } /* end of show more button styling */ <div id="all-offers-section"> <div class="offer-container"> <h2 class="offer-title"> BRONZE </h2> <hr> <div class="offer-text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus velit libero, sit amet porttitor turpis gravida ut. Integer tempus auctor imperdiet. Sed varius sit amet purus sed luctus. Maecenas scelerisque magna felis, vel ultrices enim sagittis eu. </p> </div> <div class="show-more-container"> <input id="ch-1" type="checkbox"> <label id=label-show-1 for="ch-1"></label> </div> <div> <span class="offer-price-tag"> 100 </span> </div> </div> <div class="offer-container"> <h2 class="offer-title"> VIP </h2> <hr> <div class="offer-text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus velit libero, sit amet porttitor turpis gravida ut. Integer tempus auctor imperdiet. Sed varius sit amet purus sed luctus. Maecenas scelerisque magna felis, vel ultrices enim sagittis eu. Phasellus at sapien sit amet diam pulvinar ornare quis tempus ex. Phasellus cursus eros ac urna blandit, ac tincidunt mi bibendum. Aliquam tempus ligula eu orci lacinia, quis feugiat purus luctus. Aenean eu ex dolor. Aliquam bibendum eu lectus in placerat. Nulla commodo fermentum felis ac pharetra. Aliquam ut ligula eu urna lacinia lacinia sed vitae elit. Mauris sed dui et turpis hendrerit maximus a in diam. Fusce eget finibus velit. Nunc condimentum sed mauris sed ultrices. Maecenas ut facilisis erat. Donec quis malesuada lacus. Sed iaculis dui vestibulum porta pretium. Cras tincidunt justo vel tellus ornare, non aliquam dolor rutrum. Suspendisse interdum neque arcu, sit amet mattis urna tincidunt vel. Integer fringilla nec tellus in scelerisque. Nulla placerat facilisis felis, non posuere lorem ultrices eu. Quisque accumsan fermentum purus vel aliquam. Fusce id libero vitae dui pretium posuere euismod vel odio. </p> </div> <div class="show-more-container"> <input id="ch-3" type="checkbox"> <label id=label-show-3 for="ch-3"></label> </div> <div> <span class="offer-price-tag"> 500 </span> </div> </div> </div> Run code snippetExpand snippet
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.