Answer the question
In order to leave comments, you need to log in
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
To understand how to reduce output, you need to understand how it is output.
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%;
}
.latestnews-box {
margin: 13px 7px 5px 9px;
width: 47%;
}
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;
.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{}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question