How to reduce the amount of content in the slider?

Question

PHP

Friends, I'm trying to adapt the WP Zerif Lite template and ran into a problem:
I can't figure out the "Latest News" block, namely: 4 blocks of news are displayed starting from 980 screen resolution and it doesn't look good... I think that at this resolution it's better to make it output three or two blocks... But, alas, I don't know how to implement it... Here is the link: boulinaw.bget.ru
I would like to understand the principle of how to reduce the amount of output content when changing the resolution screen.

Answer 1

To understand how to reduce output, you need to understand how it is output.

Answer 2

You have a carousel there: 4 blocks are shown initially and 2 more by clicking on the left-right arrows.
You can make 2x2 - 2 at the top will be and 2 at the bottom.
Open your theme's style.css file in a text editor.
Look for the following piece of code:

.latestnews-box {
    margin: 13px 5px 5px 11px;
    width: 23%;
}

change it to:

.latestnews-box {
    margin: 13px 7px 5px 9px;
    width: 47%;
}

Answer 3

I'm not a magician, I'm just learning, so don't be too harsh plz...
In trying to find how this carousel is displayed, I found several references, I think the most important is fron-page.php

/* LATEST NEWS */
  $zerif_latestnews_show = get_theme_mod('zerif_latestnews_show');

  if( isset($zerif_latestnews_show) && $zerif_latestnews_show != 1 ):

    get_template_part( 'sections/latest_news' );

  endif;

But there is also a mention in the js file:
And in CSS:

.latest-news{padding-bottom:66px;padding-top:100px;background:#FFFFFF;}
.carousel-inner{}
#carousel-homepage-latestnews .item{height:auto;}
.latesnews-content p,
.latesnews-content{font-size:14px;line-height:18px;color:#777777;}
#carousel-homepage-latestnews .carousel-inner .item .latestnews-title{margin-bottom:15px;color:#404040;position:relative;display:inline-block;text-transform:uppercase;margin-bottom:30px;font-weight:bold;font-size:17px;float:none;width:auto;margin-top:15px;}
#carousel-homepage-latestnews .carousel-inner .item .latestnews-title a{text-transform:uppercase;color:#404040;font-weight:700;display:block;}
#carousel-homepage-latestnews .item .latestnews-box .latestnews-title a:before{position:absolute;margin:auto;z-index:1;content:"";width:75%;height:2px;background:#e96656;bottom:-9px;left:12.5%;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+1) .latestnews-title a:before{background:#e96656;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+2) .latestnews-title a:before{background:#34d293;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n+3) .latestnews-title a:before{background:#3ab0e2;}
#carousel-homepage-latestnews .item .latestnews-box:nth-child(4n) .latestnews-title a:before{background:#f7d861;}
#carousel-homepage-latestnews .item .latestnews-box .latestnews-img .latestnews-img-a{display:block;}
#carousel-homepage-latestnews{margin:0 30px;}
#carousel-homepage-latestnews .carousel-control{width:45px;background:none;}
.carousel-control.left{margin-left:-45px;}
.carousel-control.right{margin-right:-45px;}
#carousel-homepage-latestnews .glyphicon-chevron-left:before{content:"";background:url(images/left-arrow.png) no-repeat center center;width:30px;height:30px;float:left;}
#carousel-homepage-latestnews .glyphicon-chevron-right:before{content:"";background:url(images/right-arrow.png) no-repeat center center;width:30px;height:30px;float:left;}
#carousel-homepage-latestnews{}

In these codes (except css) I could not find how this carousel is displayed ... Please help me figure it out.