Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout works perfectly on my laptop, I noticed that on my OnePlus 7T phone, a small portion of the 5th row is visible as black dots at the top, which I want to prevent from happening.

$(document).ready(function() {

  $(".content").on("click", '.showMore', function() {

    var $this = $(this);
    var content = $this.prev()
    var linkText = $this.text().toUpperCase();
    
    if (linkText === "MORE") {
      linkText = "Less";
      $this.siblings('div').css('height', 'auto');
      var currHeight = $this.siblings('div').height();
       $this.siblings('div').css('height', '8em');
       $this.siblings('div').animate({height: currHeight}, 500);
        $this.parent('div').addClass('fullpost');
   } else {
       $this.siblings('div').animate({height: '8em'}, 500);

       $this.parent('div').removeClass('fullpost');
      linkText = "More";
    }    
$this.html( "<a>" + linkText + "</a>" );  
  });
});
<div class="content">
  <div class="post">
    <div class="hideContent">
        <div class="post-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
       </div>
    </div>
  <div class="showMore"><a>Show more</a></div>
   </div>
</div>
.post-text::after {
    content: "";
    position: absolute;
    top: 2em;
    left: 0;
    height: 90px;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), white);
}

.fullpost .post-text::after {
  height:0;
  background: none;
}

.post-text{
    position: relative;;
    letter-spacing: normal;
    line-height: 2;
    font-size: 16px;
    font-family: Times, serif;
    color: #000000;
    text-align: justify;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 8em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.showMore {
  margin-top: -8px;
  cursor: pointer;
  text-align: center;
  color: #1ca099;
  font-weight: bold;
  /*text-decoration: underline;*/
}

Answer №1

To control the dimensions of your container and adjust the position of the "More" link slightly, include the properties max-height and margin-bottom within your hideContent class.

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 8em;
  max-height: 128px;
  margin-bottom: 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on effectively utilizing dynamic data with Google Charts

I am working on creating a dynamic chart using Google Charts with multiple CSV files. I want to display a different chart depending on the selection made by the user. The first file loads successfully and displays a chart, but the $("#selection").change(.. ...

The Longpoll Technique or alternative strategies

Currently, I have implemented a notification system using PHP, MySQL, and jQuery's AJAX with long polling. The connection remains open to the server for approximately 15 minutes before sending a new request. In my network console, I can see the status ...

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

Creating a progress bar for file uploads without using jQuery

We're currently seeking a way to implement a file upload progress bar feature without relying on ajax or jQuery. Unfortunately, we haven't come across any helpful tutorials through our Google searches. Below is the basic code snippet we have so ...

Make sure to use the jQuery load function to specifically target and retrieve

Hello, I'm new to working with jQuery and I have a question about adding a vertical scrollbar to a jQuery modal window. Specifically, I want the scrollbar to appear when there is a large amount of text within the modal window. Can you guide me on wher ...

How to pass the id value between pages in web developmentactics?

I've been struggling to call the id value of one page in another for a while now. I assigned the id value "addedcart" to the form and tried to call it in my PHP code, but no cart value is being displayed. I'm not sure if I am calling the id corre ...

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

A single object that can be dragged and dropped onto two separate destinations, with one of the destinations also

After researching extensively on various platforms, I have been unable to find a solution that effectively addresses my specific issue. Currently, I have two div elements functioning as droppable containers. The first div, #imgBrowser, is populated with i ...

Creating an HTML table with colspan and rowspan using ng-repeat from a deeply nested JSON dataset

I'm working on creating a table layout shown in the attached image: Composite Class Routine Check out my progress so far in this Plunker demo: https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview The JSON data I'm using is as follows: $scope. ...

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

Improved explanation of DOM elements in raw JavaScript

Is there a more efficient way to dynamically create this DOM block: <tr> <td>text</td> <td><input type="checkbox"></td> </tr> I have a function that adds a nested tr element to my tbody: function inse ...

Replicating a tag and inputting the field content

Scenario: An issue arises with copying a label text and input field as one unit, instead of just the text. Solution Needed: Develop a method to copy both the text and the input field simultaneously by selecting the entire line. Challenge Encountered: Pre ...

Populate an ng-repeat table again while maintaining its original sorting order

Incorporating a table filled with data fetched from a webservice using the ng-repeat directive, I have enabled sorting functionality for all columns. Additionally, at regular intervals, the application polls the webservice to retrieve updated data. This o ...

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

javascript The unchecking of a checkbox is not functioning

I am facing an issue with this JavaScript code. The problem is that when I uncheck a value, it removes all the values from the result instead of removing just the specific unchecked value. Can someone please help me with this? <script> window.addE ...

Initiate the animation on the progress bar only when it comes into view by using jQuery

As a beginner in jQuery, I have a question about starting an animation on a progress bar when it becomes visible on the screen using jQuery. Below is the code snippet that I have been working on but need help completing: $(".progress-bar").each( ...

What steps should I take to fix the "loading page" issue in VS2010?

Upon attempting to debug (F5) my website, I encountered the following error message: "Firefox cannot locate the server at www.localhost.com." Switching to IE did not resolve this issue either. Any suggestions on how to fix this problem would be greatly ...

Prevent submitting a form multiple times with jQuery Validate - ensuring successful submission only once

I've been working on updating my Email Contact form with the jQuery Validate Plugin and AJAX within the submitHandler. It initially worked, but I'm running into an issue where it only works once. Upon trying to submit the form again, I stop recei ...