Hello. Please tell me how to correctly modify this script so that when the screen resolution is less than 420px, the height of the detail_text block changes the value? Now, at any screen resolution, the value is set to 200px, which is not suitable for mobile phones. Dug in the direction of matchMedia, but something goes wrong.

<script type="text/javascript"> var element_detail_text = $("#detail_text").html(); $("#detail_text_resize").show(); function resize_text_field(){ if(document.getElementById("detail_text").offsetHeight > 200){ document.getElementById("detail_text").style.overflow = "hidden"; document.getElementById("detail_text").style.height = "200px"; document.getElementById("detail_text_resize").style.display = ""; } resize_text_field(); onload = function(){ resize_text_field() } function element_detail_show(){ $("#detail_text_resize").hide(); document.getElementById('detail_text').style.overflow=''; document.getElementById('detail_text').style.height='auto'; $("#detail_text_minimize").show(); } function element_detail_hide(){ $("#detail_text_minimize").hide(); document.getElementById('detail_text').style.height='200px'; document.getElementById('detail_text_resize').style.display='inline-block'; document.getElementById('detail_text').style.overflow='hidden'; $("#detail_text_resize").show(); } </script>
  • You need it for js, but css will do? - newProgrammer

1 answer 1

Maybe this example will help you.

 function changeHeight(){ var element = document.getElementById("detail_text"); if (window.matchMedia("(max-width: 420px)").matches) { element.style.height = "100px"; } else { element.style.height = "200px"; } } changeHeight(); window.addEventListener("resize", changeHeight); 
 #detail_text{ height: 200px; } 
 <div id="detail_text" >detail_text</div>

But, it's easier to do it through CSS media queries.

 @media screen and (max-width: 420px){ #detail_text{ height: 100px; } }
  • Hello. I tried through CSS media queries, but I have to additionally prescribe! Important and it still works crookedly. Those. when trying to open the text completely, it is superimposed on the lower text block. Therefore, I want to try to prescribe in the script itself different behavior for different window sizes. I guess this can solve the problem. Thank you, now I will try to use the example you proposed - Alla
  • Generally, just for this and there are CSS media queries that would adapt your page for all screens. By the way, did you put the code with media queries at the bottom of the styles? - Igor Lut
  • Yes of course. Maybe this is due to the fact that the styles for this element, which are defined in the script, are written inline? - Alla
  • Yes, of course inline styles are in priority. So it is better for you to remove them in the main file. There is a possibility? - Igor Lut
  • one
    @Alla Script You won't need it at all. You can do all this in CSS much easier and more convenient. On JS, it’s worth doing it if the CSS fails. Do not complicate things ... - Igor Lut