M
M
mUchenik2016-04-04 23:12:14
PHP
mUchenik, 2016-04-04 23:12:14

How to reduce the amount of content in the slider?

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 the question

In order to leave comments, you need to log in

3 answer(s)
R
Roman Dvoryanov, 2016-04-05
@Raxen

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

L
lakegull, 2016-04-05
@lakegull

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%;
}

M
mUchenik, 2016-04-05
@mUchenik

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question