Padding Reduce Collection

Store Design
, , , , ,
1

eslamibrahim_0-1730842667607.png
eslamibrahim_0-1730842667607.png411×786 56.5 KB

How do I reduce these space and how can do read more only in mobile version like this website:

eslamibrahim_1-1730842839073.png
eslamibrahim_1-1730842839073.png559×455 32.6 KB

that is my website: https://level-up.gg/collections/playstation

2

@media only screen and (max-width: 600px) {
.section–template {
margin: 1rem auto;
}

}
add this CSS at assets/main.css

3

Hello @eslamibrahim ,
To reduce padding on top and bottom try this code

.cc-collection-banner {
    margin: 20px 0;  /*make it as your requirement*/
}

To add read more for mobile modify your code

EvinceDev_0-1730877310285.png
EvinceDev_0-1730877310285.png1312×910 57.8 KB

.collection-hero .content{
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
}

.collection-hero .content.expanded {
  -webkit-line-clamp: unset;
  max-height: none;
}

.collection-hero .content + .read-more.hidden {
 display: none;
}

// Add this js code in yout script.js file 
document.addEventListener('DOMContentLoaded', function() {
  const readMoreButtons = document.querySelectorAll('.read-more');

  // Count the number of text rows
  function countTextRows(textElement) {
    const computedStyle = window.getComputedStyle(textElement);
    
    const textHeight = textElement.scrollHeight;
    const lineHeight = parseFloat(computedStyle.lineHeight);
    const numberOfRows = Math.round(textHeight / lineHeight);
    
    return numberOfRows;
  }

  function updateButtonVisibility() {
    readMoreButtons.forEach(button => {
      const content = button.closest('.collection-hero__description').querySelector('.content');
      const rows = countTextRows(content);

	  // Set your count of lines
      rows <= 3 ? 
		  button.classList.add('hidden') : 
	      button.classList.remove('hidden');
    });
  }

  readMoreButtons.forEach(button => {
    const content = button.closest('.collection-hero__description').querySelector('.content');

    button.addEventListener('click', function() {
      content.classList.toggle('expanded');
      
      content.classList.contains('expanded') ? 
        button.textContent = 'Read Less' : 
        button.textContent = 'Read More';
    });
  });

  updateButtonVisibility();

  window.addEventListener('resize', function() {
    updateButtonVisibility();
  });
});
4

my website is https://level-up.gg/ i want to add read more in collection page

5

where can I add this read?