2016-05-20 2 views
-2
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Blogs Index page</title> 

<style> 
.page-background{ 


} 

/* здесь запускается медиа запросов, но он не работает в отзывчивым режиме в браузере */Отзывчивость не работает

@media only screen and (device-width: 768px), 
    only screen and (max-width: 768px) { 
    .featured-item { 
    display: block !important; 
    width: 100% !important; 
    height: auto !important; 
    } 


    h3 { 
font-size: 2em !important; 
} 
    p { 
font-size: 1.3em !important; 
} 
    a.no-decoration { 
text-decoration: none !important; 
color: #000 !important; 
font-size: 1.2em !important; 
} 
    a.no-decoration.topics-label-text { 
color: #a3a3a3 !important; 
font-size: 1.3em !important; 
} 
    .topic-label { 
vertical-align: top !important; 
text-align: center !important; 
/* padding: 5px; */ 
margin-left: 1px !important; 
color: #a3a3a3 !important; 
padding: 0px 52px !important; 
/* padding-bottom: 15px; */ 
} 
} 



.main-comp{ 
     width: 90%; 
height: 100%; 
background-color: #FFFBF0; 
margin: 5%; 
} 

a.heading-link{ 
    text-decoration: none; 
    } 
.current-blog{ 
width:100%; 
    height: 45%; 

background: #FFF URL(https://1401364973.rsc.cdn77.org/content/uploads/2014/11/hero_radio_tuning.jpg) repeat fixed; 
} 
.current-blog-title{ 
font-size: 2em; 
line-height: 1em; 
text-decoration: none; 
color: green; 
font-weight: 500; 
width: 65%; 
} 

.current-blog-content { 
/* margin-top: 20%; */ 
    padding-top: 6em; 
} 
.current-blog-intro-para{ 
width:65%; 
    margin-top: 3%; 
} 
.current-blog-description{ 
font-family: Gadget, sans-serif; 
color: #000; 

font-size: 1.3em; 
line-height: 1.5em; 
} 
.blogs-listing{ 
width: 100%; 

} 
.featured-item{ 
    display: inline-block; 
width: 30%; 
height: 26em; 
margin: 1%; 
border: 1px dotted #a3a3a3; 
} 
.left{ 
float:left; 
} 

.featuerd-item-content { 
margin: 1em; 
} 

.label-div{ 
    height: 2%; 
background-color: #ccc; 
padding: 0.2em; 
position: absolute; 

} 

img.featured-item-img { 
width: 100%; 
} 
a.no-decoration { 
text-decoration: none; 
color: #000; 
} 
a.no-decoration:hover { 
text-decoration: underline; 

} 
a.no-decoration.topics-label-text { 
color: #a3a3a3; 
} 

.topic-label { 
vertical-align: top; 
text-align: center; 
/* padding: 5px; */ 
margin-left: 1px; 
color: #a3a3a3; 
padding: 1px 36px; 
} 





</style> 

</head> 
<div class="page-background"> 
<div class="main-comp"> 
<div class="current-blog"> 
<div class="current-blog-content"><a class="heading-link" href="#"><h2 class="current-blog-title">Why millennial women are tuning into their finances</h2></a> 
<p class="current-blog-intro-para"><span class="current-blog-description">While survey data finds millennials more engaged than other generations when it comes to finances, there are some differences between how millennial men and women invest. The BlackRock Blog’s Global Editor takes a deeper dive into the numbers.</span></p> 
</div> 

</div> 
<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/bite_plum_simon_greig_shtuterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/tennis_ball_net_oneinchpunch_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/woman_calculator_tsvetelin_dobrev_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 

<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/uk_eu_topor_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/woman_in_heels_kaspars_grinvalds_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/boxing_gloves_jocic_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 
<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/balloons_suitcase_nito_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/card_catalog_andrey_kuzmin_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/plant_sprouting_obormot_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 
</div> 
</div> 

<body> 
</body> 
</html> 

ответ

1

Вы хотите добавить видовых мета-тег в голове вашего документ, например

<head> 
.... 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
... 
</head> 

См http://www.w3schools.com/css/css_rwd_viewport.asp для более подробной информации

Смежные вопросы